Canvas---绘制虚线

绘制虚线

 

数组是用来描述你的排列方式的

        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>