基于canvas原生js的圆形进度环（progressBar）

coolpail 发布于2019-08-05 11:09 / 2103人阅读

摘要：代码如下创建画布对象开始绘画微软雅黑效果如图使用说明地址

代码如下：

(function(w) {
                function Cycle(options) {
                    this.id = options.id;
                    this.width = options.width;
                    this.height = options.height;
                    this.percent = options.percent;
                    this.border = options.border;
                    this.bgColor = options.bgColor;
                    this.barColor = options.barColor;
                    this.textColor = options.textColor;
                };
                Cycle.prototype = {
                    contructor: Cycle,
                    init: function() {
                        //创建画布对象
                        var html = "";
                        document.getElementById(this.id).innerHTML = html;
                        var time = setInterval(function() {
                            this.percent++;
                            if(this.percent >= 100) {
                                clearInterval(time);
                            }
                            this.setOptions();
                        }.bind(this), 1000);
                        this.setOptions()
                    },
                    setOptions: function() {
                        var degree = this.percent;
                        var canvas = document.getElementById("canvas_" + this.id);
                        var context = canvas.getContext("2d");
                        context.clearRect(0, 0, this.width, this.height);
                        //开始绘画
                        context.beginPath();
                        context.lineWidth = this.border;
                        context.strokeStyle = this.bgColor;
                        context.arc(this.width / 2, this.height / 2, (this.width / 2 - this.border / 2), 0, 2 * Math.PI);
                        context.stroke();
                        var deg = degree * 3.6 / 180 * Math.PI
                        context.beginPath();
                        context.lineWidth = this.border;
                        context.strokeStyle = this.barColor;
                        context.arc(this.width / 2, this.height / 2, (this.width / 2 - this.border / 2), 0 - Math.PI / 2, deg - Math.PI / 2);
                        context.stroke();
                        context.beginPath();
                        context.fillStyle = this.textColor;
                        context.font = "18px 微软雅黑";
                        var text = degree + "%";
                        var textWidth = context.measureText(text).width;
                        context.fillText(text, this.width / 2 - textWidth / 2, this.height / 2 + 9);
                    }
                }
                w.Cycle=Cycle;
            }(window))

效果如图：

使用说明：

var opts1 = {
            id: "cycle1",
            width: "300",
            height: "300",
            percent: "20",
            border: "30",
            bgColor: "green",
            barColor: "yellow",
            textColor: "pink"
        };
        var opts2 = {
            id: "cycle2",
            width: "400",
            height: "400",
            percent: "60",
            border: "30",
            bgColor: "gray",
            barColor: "red",
            textColor: "pink"
        };
        new Cycle(opts1).init();
        new Cycle(opts2).init();

github地址：

https://github.com/jeromehan/...

专线服务超融合服务器 progressbar圆形进度 html的圆形进度条原生js的hover 基于js的语音处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56190.html

基于canvas原生js的圆形进度环（progressBar）

摘要：代码如下创建画布对象开始绘画微软雅黑效果如图使用说明地址代码如下： (function(w) { function Cycle(options) { this.id = options.id; this.width = options.width; ...

mushang 2019-08-20 16:10 评论0 收藏0
自定义ProgressBar(自定义View和ClipDrawable)

摘要：第二个参数图片，第三个参数开始裁剪的位置，这里是从左开始布局中使用，和普通的使用方法一样最后是代码中的的引用取值不可见，完全显示这样复杂的可以直接使用图片按比例显示读取进度节省代码量开发中经常需要自定义ProgressBar，这里用了自定义View和ClipDrawable实现简单的ProgressBar自定义View效果:showImg(https://segmentfault.c...

spademan 2019-06-25 11:41 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

leanote 2019-08-21 11:36 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

enali 2019-08-29 12:12 评论0 收藏0
基于 HTML5 Canvas 的拓扑组件开发

摘要：下面我以一个进度环为例，来探究一下如何使用封装出一个拓扑组件。当不等于的时候。进度环由于浏览器的限制显示最小字体为，所以不能通过这样的数值设定文字大小，只能通过缩放来控制文字的大小了。在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一，在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实...

adam1q84 2019-08-05 15:15 评论0 收藏0