Canvas绘制圆形进度条

2022-08-31 16:47| 来源: 网络整理| 查看: 265

Canvas绘制圆形进度条

canvas画布坐标点，如下图：

doctype html> Canvas绘制圆形进度条绘制圆形进度条 var ctx = canvas.getContext('2d');//生成画笔对象 ctx.lineWidth = 30;//线条的宽度 ctx.font = '60px SimHei';//字体样式 var start = -90, end = -90;//起止点 var timer = setInterval(function () { ctx.clearRect(0, 0, 500, 500);//清除画布已有内容 end += 10; //绘制圆弧 ctx.beginPath();//开始绘制路径 ctx.arc(250, 250, 100, start * Math.PI / 180, end * Math.PI / 180);//绘制一个弧线 if (end - start = 270) { clearInterval(timer); } }, 200)

运行效果：

【本文地址】

公司简介

联系我们