canvas绘制动态圆环形进度条及参数详解

项目需要写一个圆形进度条,就尝试使用 canvas 写了一个,具体如下:上图是项目图片仅供参考,本文只介绍圆环及动效的实现。

HTML:

<div class="time-graph">
    <canvas style="margin-top: -20px" id="time-graph-canvas" width="160" height="160"></canvas>
</div>

JS代码:

function drawMain(drawing_elem, percent, forecolor, bgcolor) {
    /*  
        函数封装:
        @drawing_elem: 绘制对象
        @percent:绘制圆环百分比, 范围[0, n]
        @forecolor: 绘制圆环的前景色,颜色代码
        @bgcolor: 绘制圆环的背景色,颜色代码
    */
    var context = drawing_elem.getContext("2d");
    var center_x = drawing_elem.width / 2;
    var center_y = drawing_elem.height / 2;
    var rad = Math.PI * 2 / 1500; //Math.PI = 180°,此处是吧360°分成1500份
    var speed = 0;

    // 绘制背景圆圈
    function backgroundCircle() {
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.beginPath();
        context.lineWidth = 8; //设置线宽
        var radius = center_x - context.lineWidth; //圆角
        context.lineCap = "round";
        context.strokeStyle = bgcolor;
        context.arc(center_x, center_y, radius, Math.PI / 1.3333, Math.PI / 4, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,结束角度,逆时针还是顺时针绘图:False = 顺时针、true = 逆时针)。
        context.stroke();
        context.closePath();
        context.restore();
    }

    // 绘制运动圆环
    function foregroundCircle(n) {
        context.save();
        context.strokeStyle = forecolor;
        context.lineWidth = 8;
        context.lineCap = "round";
        var radius = center_x - context.lineWidth;
        context.beginPath();
        context.arc(center_x, center_y, radius, Math.PI / 1.3333, Math.PI / 1.3333 + n * rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
        context.stroke();
        context.closePath();
        context.restore();
    }

    //绘制文字
    function text(n) {
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.fillStyle = forecolor;
        context.textAlign = 'center';
        var font_size = 40;
        context.font = font_size + "px Helvetica";
        context.fillText(n.toFixed(0), center_x, center_y + font_size / 2); // 在画布上写文本fillText(内容,x坐标,y坐标),
        context.restore();
    }

    //执行动画
    (function drawFrame() {
        window.requestAnimationFrame(drawFrame);
        context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
        backgroundCircle();
        text(speed);
        foregroundCircle(speed);
        if (speed >= percent) return;
        speed += 10; //文字变化速度
    }());
}
// 调用函数:
var time_canvas = document.getElementById("time-graph-canvas"); /*获取canvas容器*/
this.drawMain(time_canvas, 750, "#85d824", "#eef7e4");

有些绘制细节需要注意,为了保证绘制的清晰度,canvas 的大小需要设置为 canvas 父元素大小的2倍。

其他的代码都有详细的注释,自己拷一下,运行一下就知道了。

我把源码放在了 GitHub 上,需要的可以:点击访问

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小皮咖

Canvas 进阶(一)二维码的生成与扫码识别

因此,打算写一系列关于 canvas 的文章,探索学习提升自己的同时顺便分享给大家。

13720
来自专栏小皮咖

Canvas 进阶(四)实现一个“刮刮乐”游戏

我们创建一个 ScrapAward 类,通过传入 option 和调用其 restart() 方法实现重新开始。

7720
来自专栏前端自习课

【CSS】398- 原生JS实现DOM爆炸效果

此次分享是一次自我组件开发的总结,还是有很多不足之处,望各位大大多提宝贵意见,互相学习交流。

18370
来自专栏eguid开源技术分享

原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

16320
来自专栏机器学习AI算法工程

【深度学习项目】打开摄像头拍照,并做图片识别

最近遇到一个项目需求,需要进行拍照,并且识别图片中的文字,其实该项目也可以改成其他图像识别,比如人脸识别、图像分类等。

13430
来自专栏前端资源

利用canvas的fillText属性绘制文字并实现居中和清空画布

其实上半部分是绘制圆环,最后 8 行才是文字部分,可以设置字体样式、颜色、是否居中等。

11410
来自专栏小皮咖

Canvas 进阶(三)ts + canvas 重写”辨色“小游戏

之前写过一篇文章 ES6 手写一个“辨色”小游戏, 感觉好玩挺不错。岂料评论区大神频出,其中有人指出,打开控制台,输入以下代码:

5310
来自专栏小皮咖

Canvas 进阶(二)写一个生成带logo的二维码npm插件

在前面的文章有讲到如何用 canvas 画二维码,在此基础上再画一个公司logo,并提供下载的方法供调用,再封装成 npm 插件

7720
来自专栏eguid开源技术分享

发一下自己开发的自娱自乐小游戏:奥赛罗(黑白棋、翻转棋),支持可落子位置提示,原创翻转算法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

9430
来自专栏开发之途

Flutter 实战 - 用贝塞尔曲线画一个带文本的波浪球 Widget

flutter 中的自定义 Widget 算作是 flutter 体系中比较高阶的知识点之一了,相当于原生开发中的自定义 View,以我个人的感受来说,自定义 ...

7510

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励