首页 > 其他 > 详细

Canvas---绘制虚线

时间:2020-02-11 19:17:18      阅读:55      评论:0      收藏:0      [点我收藏+]

绘制虚线

 

数组是用来描述你的排列方式的
        ctx.setLineDash([5, 15, 10]);
 
技术分享图片
获取虚线的排列方式 获取的是不重复的那一段的排列方式
console.log(ctx.getLineDash());


虚线的偏移

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

 

 

技术分享图片

-20, 往前偏移

 技术分享图片

+20 往后偏移

 技术分享图片

 

 

 

    <script>
        var myCanvas = document.querySelector(‘canvas‘);
        var ctx = myCanvas.getContext(‘2d‘);

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

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

        ctx.stroke();
    </script>

 

Canvas---绘制虚线

原文:https://www.cnblogs.com/jane-panyiyun/p/12295802.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!