专栏首页前端之攻略Canvas多列表文字的显示 原

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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 列表页面指向 原

    在引用公共html页面时,为了便于知道当前所处的页面,我们往往在当前的页面采用特定的样式(如在当前页面的列表中加active class),实现原理是当a 的h...

    tianyawhl
  • div边框重叠,像素变粗,解决方法 原

    如左图所示,靠在一起的div,由于边框紧挨着,显得粗,很不美观,如何变成后面正确显示,解决方法

    tianyawhl
  • 点击按钮平移隐藏与显示div(使用translate)

    css3 transform变换后,原来的位置还占据空间,那是因为 transform并没有让元素脱离标准流; 解决方法: 可以考虑在写了transform...

    tianyawhl
  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺
  • 常见闭合百叶窗

    李才哥
  • jquery 事件委托 - delegate()

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也...

    Devops海洋的渔夫
  • vue 的上拉加载,下拉刷新(基于better-scrol)

    我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的...

    我乃小神神
  • 【CSS】828- 纯CSS导航栏下划线跟随效果

    在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

    pingan8787
  • 使用webpack打包js文件(隔行变色案例)

    Dream城堡
  • 第21天:京东页面轮播图

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券