Canvas多列表文字的顯示
阿新 • • 發佈：2018-12-01
把網頁中的多個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>