腾讯云·社区
Canvas多列表文字的显示 原
把网页中的多个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({});
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句