把网页中的多个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>