canvas：动态虚线圆

ゞ浴缸里的玫瑰 2023-02-21 09:04 29阅读 0赞

1.绘制动态虚线圆形  
![在这里插入图片描述][20200629184120592.gif]

1.分析  
画圆需要arc()，stroke() API  
设置画线是虚线而不是实线

*  setLineDash(\[number\])：设置虚线，参数为数字数组,数字是用来设置虚线每一个小段的长度。比如设置值\[4,2\]则虚线如【 — - — - — -…】循环出现。
 *  lineDashOffset \[=number\]：设置虚线的偏移量。  
    动起来。需要用到setTimeout(function, duration).  
    每次在setTimeout中绘制时都是属于重新绘制，之前绘制的需要清除
 *  clearRect(x, y, w, h)：清除左上角在(x, y)处的宽为w,高为h的矩形内的所有已绘制的内容。

<canvas id="canvas5" height="800" width="800" style="border:1px solid #ccc"></canvas>
    <script>
        const canvas = document.getElementById('canvas5');
        if(canvas.getContext){ 
            const van = canvas.getContext('2d');
            // 设置起始偏移量
            let offSet = 0;
            drawArcDash();
    
            function drawArcDash() { 
                // 清除矩形内所有内容
                van.clearRect(0,0, canvas.width, canvas.height);
                // 开始一次绘制
                van.beginPath();
                // 设置虚线4-2-4-2排列
                van.setLineDash([4,2]);
                // 设置虚线偏移量
                van.lineDashOffset = -offSet;
                // 绘制圆形
                van.arc(300,300,80,0,Math.PI*2);
                // 执行绘制
                van.stroke();
                // 关闭此次绘制
                van.closePath();
                // 当偏移量大于16时重归0
                if(offSet > 16){ 
                    offSet = 0;
                }
                offSet++;
                // 通过setTimeout递归调用绘制
                setTimeout(drawArcDash,20)
            }
    
        }else{ 
            alert('不支持')
        }
    </script>

小结 新增API

*  setLineDash(\[number\])：设置虚线，参数为数字数组,数字是用来设置虚线每一个小段的长度。比如设置值\[4,2\]则虚线如【  
    — - — - — -…】循环出现。
 *  lineDashOffset \[=number\]：设置虚线的偏移量。
 *  clearRect(x, y, w, h)：清除左上角在(x, y)处的宽为w,高为h的矩形内的所有已绘制的内容。

[20200629184120592.gif]: https://img-blog.csdnimg.cn/20200629184120592.gif