Canvas多列表文字的显示

最新推荐文章于 2024-04-17 17:10:25 发布

weixin_34235105

最新推荐文章于 2024-04-17 17:10:25 发布

阅读量412

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2612473/blog/2963822

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/2612473/blog/2963822