Canvas绘制圆形进度条

最新推荐文章于 2022-12-26 15:07:32 发布

weixin_30485379

最新推荐文章于 2022-12-26 15:07:32 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/doing123/p/7202689.html

版权

Canvas绘制圆形进度条

canvas画布坐标点，如下图：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制圆形进度条</title>
</head>
<body>
<h1>绘制圆形进度条</h1>
<!--画布-->
<canvas style="background: #efefef;" id="canvas" width="500" height="500"></canvas>
<script>
    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 < 120) {    //1/3范围内 红色
            ctx.strokeStyle = 'red';//轮廓/描边的颜色
            ctx.fillStyle = 'red';//填充颜色
        } else if (end - start < 240) {
            ctx.strokeStyle = 'orange';
            ctx.fillStyle = 'orange';
        } else {
            ctx.strokeStyle = 'green';
            ctx.fillStyle = 'green';
        }
        ctx.stroke();//对一条路径描边
        var percentage = Math.floor((end - start) / 360 * 100) + '%';//绘制文字
        var txtWidth = ctx.measureText(percentage).width; //获得文字的宽度
        ctx.fillText(percentage, 250 - txtWidth / 2, 250 + 30);  //绘制文本
        if (end >= 270) {
            clearInterval(timer);
        }
    }, 200)
</script>
</body>
</html>

运行效果：

转载于:https://www.cnblogs.com/doing123/p/7202689.html

weixin_30485379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas绘制圆形进度条

Canvas绘制圆形进度条canvas画布坐标点，如下图：<!doctype html><html><head> <meta charset="UTF-8"> <title>Canvas绘制圆形进度条</title></head><body>&lt...
复制链接

扫一扫