H5 Canvas绘制圆形进度条动画效果

效果如图

效果比较简单

html结构部分

<canvas id="canvas" width="110" height="110"></canvas>

js部分

var c = document.getElementById("canvas"); //获取绘图上下文 var ctx = c.getContext("2d"); //开始位置 var x = -0.5; //增量 var step = 0.01; //定时器 var timer = setInterval(function(){ //清屏 ctx.clearRect(0, 0, canvas.width, canvas.height); //画圆弧 ctx.beginPath(); ctx.arc(55,55,50,-Math.PI/2,Math.PI*x); //设置绘制颜色 ctx.strokeStyle = "red"; //设置绘制线条宽度 ctx.lineWidth = 5; //描边 ctx.stroke(); //处理增量 x += step; //当画完整个圆时清除定时器 if(x>1.6){ clearInterval(timer); } },20);

总结

canvas绘制动画三步骤:

先清屏绘制图形处理变量