canvas：动态虚线圆


1.绘制动态虚线圆形
在这里插入图片描述

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

  • setLineDash([number])：设置虚线，参数为数字数组,数字是用来设置虚线每一个小段的长度。比如设置值[4,2]则虚线如【 — - — - — -…】循环出现。
  • lineDashOffset [=number]：设置虚线的偏移量。
    动起来。需要用到setTimeout(function, duration).
    每次在setTimeout中绘制时都是属于重新绘制，之前绘制的需要清除
  • clearRect(x, y, w, h)：清除左上角在(x, y)处的宽为w,高为h的矩形内的所有已绘制的内容。
1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
1
 

小结 新增API

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