1.绘制动态虚线圆形
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的矩形内的所有已绘制的内容。