557ay(绘制虚线.html）

最新推荐文章于 2024-07-02 09:19:07 发布

原创最新推荐文章于 2024-07-02 09:19:07 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML5 Canvas API绘制虚线的方法。通过设置线段样式和偏移量，可以创建出美观的虚线效果。文章提供了具体的代码示例，包括如何设置线段的长度和间距。

《2019年4月14日》【连续 557天】

标题：绘制虚线.html；
内容：

 var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画线*/
    ctx.moveTo(100,100.5);
    ctx.lineTo(300,100.5);
    /*[5,10] 数组是用来描述你的排列方式的*/
    ctx.setLineDash([20]);
    /*获取虚线的排列方式 获取的是不重复的那一段的排列方式*/
    console.log(ctx.getLineDash());

    /*如果是正的值 往后偏移*/
    /*如果是负的值 往前偏移*/
    ctx.lineDashOffset = -20;

    ctx.stroke();