HTML中canvas如何实现圆圈进度条-创新互联

这篇文章给大家分享的是有关HTML中canvas如何实现圆圈进度条的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

实现h6 canvas圆圈进度条的实例代码，本人的想法有很多，但是利用canvas无疑是最方便的解决办法，在此以canvas实现为例子，具体实现步骤如下：

Paste_Image.png

    
    
        *{
            margin: 0;
            padding: 0;
        }
    
    


    
    
    

    
    
    

    
    window.onload = function(){
        new Progress().renderOne('canvas1',100,6,10);//id，画布宽和高，圆的半径 百分百。
        new Progress().renderOne('canvas2',100,5,20);
        new Progress().renderOne('canvas3',100,5,30);

        new Progress().renderOne('canvas8',100,5,80);
        new Progress().renderOne('canvas9',100,5,90);
        new Progress().renderOne('canvas10',100,5,100);
    }
    function Progress() {
    var progress = { textheight: null, renderOne: function(id, length, r, percent) {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            canvas.width = length;
            canvas.height = length;
            var i = 0;
            var interval = setInterval(function() { i++;
                progress.render(context, length, r, i, percent);
                if (i >= percent) { clearInterval(interval) } }, 10) }, render: function(context, length, r, i, percent) { context.clearRect(0, 0, length, length);
            context.beginPath();
            var gradient = context.createLinearGradient(length, 0, 0, 0);
            gradient.addColorStop("0", "#76EEC6");
            gradient.addColorStop("1.0", "#63B8FF");
            context.strokeStyle = gradient;
            context.lineWidth = r;
            context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI + i * 0.02 * Math.PI, false);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.strokeStyle = "#8d8d8d";
             context.strokeStyle ='red';/////////////////////////////////////////////////
            context.lineWidth = 2;
            context.fillStyle = "#ffffff";
            context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI;
            var x = Math.cos(radian) * (length / 2 - r) + length / 2;
            var y = Math.sin(radian) * (length / 2 - r) + length / 2;
            context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = "#54DDAF";
            context.fillStyle = "#54DDAF";
             context.fillStyle = "blue";///////////////////////////////////////
            context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI);
            context.fill();
            context.closePath();
            context.beginPath();
            context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑";
            context.fillStyle = "#ffffff";
            var text = percent + "%";
            textwidth = context.measureText(text).width;
            if (this.textheight == null) {
                var p = document.createElement("p");
                document.body.appendChild(p);
                p.innerHTML = text;
                p.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px";
                this.textheight = p.offsetHeight;
                p.parentNode.removeChild(p) }
            textheight = this.textheight;
            context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4);
            context.fill();
            context.closePath() } };
    return progress };

感谢各位的阅读！关于“HTML中canvas如何实现圆圈进度条”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。