html5 canvas实现多重颜色圆环进度条

最新推荐文章于 2022-12-07 00:52:15 发布

weixin_30363817

最新推荐文章于 2022-12-07 00:52:15 发布

阅读量774

点赞数

原文链接：http://www.cnblogs.com/joyho/articles/3669088.html

版权

如题，使用canvas实现如图效果，该效果用于手机端，也可以用于支持canvas的PC浏览器

实现思想：在画布上画多重扇圆进行颜色叠加，最后在顶层加上一个白色并且半径最小的圆覆盖，使视觉上形成一个圆环。
　　　　　第一层是一个灰色的全圆
　　　　　第二层是从12点钟方向顺时针开始画的红色扇圆，当角度=360度时整个圆环都是红色的。
　　　　　第三层是从12点钟方向逆时针开始画的橙色扇圆

当红色圆角度==橙色圆角度==0度时，圆环是灰色的（最底层的颜色）

当红色圆角度==360度，橙色圆角度==0度时，圆环是红色的（第二层颜色）

当红色圆角度==360度，橙色圆角度>0度时，圆环出现两种颜色（红色、橙色）

实现的源代码如下：点击这里下载源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"  content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="MobileOptimized" content="320"/>
<title>多色圆环进度</title>
</head>
<body>
    <canvas id="procanvas" class="procanvas" value="100%"></canvas><!--value代表红色-->
<script>
    function process(canvasid,op,stylewidth,styleheight){
            var canvas = document.getElementById(canvasid);
            var canvasvalue = canvas.getAttribute("value");
            var process = canvasvalue.substring(0, canvasvalue.length-1);
            var oProcess = op;
            var context = canvas.getContext('2d');
            var scale = window.devicePixelRatio;
            var center = [stylewidth/2*scale,styleheight/2*scale];
            canvas.style.width = stylewidth + "px";
            canvas.style.height = styleheight + "px";
            canvas.width = stylewidth*scale;
            canvas.height = styleheight*scale;
            
         //开始画一个灰色的圆
            context.beginPath();
            context.moveTo(center[0], center[1]);
            context.arc(center[0], center[1], center[0], 0, Math.PI * 2, false);
            context.closePath();
            context.fillStyle = '#e6e5e5';
            context.fill();
            
            // 画进度(红色)
            if(process != 0 && process != 100){
                context.beginPath();
                context.moveTo(center[0], center[1]);
                if(process <25){
                    context.arc(center[0], center[1], center[0], Math.PI*1.5, Math.PI*(1.5+0.5*(process/25)), false);//设置圆弧的起始于终止点
                }
                else{
                    context.arc(center[0], center[1], center[0], Math.PI*1.5, Math.PI*2* ((process / 100)-0.25), false);//设置圆弧的起始于终止点
                }
                context.closePath();
                context.fillStyle = '#db3030';
                context.fill();
            }
            else if(process == 100){
                context.beginPath();
                context.moveTo(center[0], center[1]);
                context.arc(center[0], center[1], center[0], 0, Math.PI*2, false);//设置圆弧的起始于终止点
                context.closePath();
                context.fillStyle = '#db3030';
                context.fill();
            }

            //画进度(橙色)
            if(oProcess != 0 && oProcess !=100){
                context.beginPath();
                context.moveTo(center[0], center[1]);
                context.arc(center[0], center[1], center[0], Math.PI*1.5,Math.PI*1.5-(oProcess/25)*Math.PI*0.5, true);//设置圆弧的起始于终止点
                context.closePath();
                context.fillStyle = '#fb7d32';
                context.fill();
                //Math.PI*1.5-((oProcess+25)/100*Math.PI)
            }
            else if(oProcess == 100){
                context.beginPath();
                context.moveTo(center[0], center[1]);
                context.arc(center[0], center[1], center[0], 0,Math.PI*2, true);//设置圆弧的起始于终止点
                context.closePath();
                context.fillStyle = '#fb7d32';
                context.fill();
            }

            // 画内部空白
            context.beginPath();
            context.moveTo(center[0], center[1]);
            context.arc(center[0], center[1], 21*scale, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = 'rgba(255,255,255,1)';
            context.fill();
}
    process("procanvas",40,52,52);//10是橙色
</script>
</body>
</html>

转载于:https://www.cnblogs.com/joyho/articles/3669088.html

weixin_30363817

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas实现多重颜色圆环进度条

如题，使用canvas实现如图效果，该效果用于手机端，也可以用于支持canvas的PC浏览器实现思想：在画布上画多重扇圆进行颜色叠加，最后在顶层加上一个白色并且半径最小的圆覆盖，使视觉上形成一个圆环。　　　　　第一层是一个灰色的全圆　　　　　第二层是从12点钟方向顺时针开始画的红色扇圆，当角度=360度时整个圆环都是红色的。　　　　　第三层是从12点钟方向逆时针开始画的橙色扇圆当红色圆...
复制链接

扫一扫