Canvas多列表文字的顯示

時間 2019-11-13

標籤 canvas 列表文字顯示简体版

原文原文鏈接

把網頁中的多個li的內容顯示到canavas的方法html

<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>

相關標籤/搜索