canvas快速入门3：动态虚线圆

这一章来绘制概述里面的第一个图，非常非常的简单。

1.绘制动态虚线圆形

1.分析

• 画圆需要arc()，stroke() API
• 设置画线是虚线而不是实线(本章新增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的矩形内的所有已绘制的内容。