Canvas多列表文字的显示 原
Canvas多列表文字的显示 原
tianyawhl
发布于 2019-04-04 01:32:30
发布于 2019-04-04 01:32:30
代码可运行
运行总次数：0
代码可运行
把网页中的多个li的内容显示到canavas的方法
<body>
<ul style="display:none">
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the third line</li>
</ul>
<canvas id="canvas" width="600" height="300" style="background:pink;"></canvas>
<script>
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "20px Times New Roman";
ctx.fillStyle = "black";
var li = document.getElementsByTagName("li")
var liLength = li.length;
var lineHeight = 25;
for (var i = 0; i < liLength; i++) {
ctx.fillText(li[i].innerHTML, 10, lineHeight);
lineHeight += 25;
}
}
draw()
</script>
</body>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/11/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
