炫意html5
最早CSS3和HTML5移动技术网站之一

canvas绘制圆环进度条出现模糊效果解决方案

问题

近期用canvas绘制了圆环进度条,但是进度条出现周围模糊的现象,针对这种现象,网上搜了搜,有人提问,但是貌似没有很好的解决方案,针对这种情况,提出几种解决方案,仅供参考!
模糊效果如下:

解决方案

针对这种情况,我提出几种解决思路。

一、运用hidpi-canvas-polyfill 的js进行解决

HiDPI Canvas Polyfill 是针对设备提出的canvas高清解决方案,首先引入hidpi-canvas.js。

这个js会自动识别你的canvas,会把你的canvas变小,虽然不模糊了,但是不是我们想要的效果。(可以结合后面的方法进行改进)

关于hidpi-canvas-polyfill 地址:https://github.com/jondavidjohn/hidpi-canvas-polyfill

具体使用方法大家可以看他的描述。在这里就不展开讲解了。

缺点: 这种方式虽然可以解决,但是感觉毕竟要引入一些js还有,进行自动化识别中,canvas可能会变小,还有,他会自动给canvas加了一个宽高,这些在一定情况下不是我们想要的。

二、指定默认宽高法

这种方式在一定程度上,可以解决我说的模糊问题。将上面模糊的代码进行如下改进。

<canvas width="250" height="250"></canvas>

canvas指定一个宽高,然后半径只要小于250/2就可以。中心点坐标直接是canvas的宽高除以2。

代码如下:

var pczren = document.getElementById('pczren');
var mprocess = pczren.getAttribute('data-process');
var mctx = pczren.getContext('2d');
var Wc = pczren.width;
var Hc = pczren.height;
function draw(ctx, process, colors, fco) {
// 画灰色的圆
ctx.beginPath();
ctx.arc(Wc/2, Hc/2,100, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fco;
ctx.fill();
// 画进度环
ctx.beginPath();
ctx.moveTo(Wc/2, Hc/2);
ctx.arc(Wc/2, Hc/2, 100, Math.PI * 2.5, Math.PI * (2.5 + 2 * process / 100));
ctx.closePath();
ctx.fillStyle = colors;
ctx.fill();
// 画内填充圆
ctx.beginPath();
ctx.arc(Wc/2, Hc/2, 80, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = '#fff';
ctx.fill();
}
draw(mctx, mprocess, '#53b48d', '#edecec');

效果图如下:

三、canvas替代法

当然,这种方法不是我们想要的,在没有办法的情况下,我们可以选择替代方案来解决这个问题,我们可以想象,除了用canvas绘制圆环进度条之外,我们有没有其他方式呢?例如css3+jquery方案,css3方案等等。

3.1css3+jquery方案

html如下:

<div>
<div><div></div></div>
<div><div></div></div>
<div><span>15</span>%</div>
</div>

css如下:

body {
font-family: "微软雅黑";
}
.circle {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #0cc;
}
.pie_left, .pie_right {
width:200px;
height:200px;
position: absolute;
top: 0;left: 0;
}
.left, .right {
width:200px;
height:200px;
background:#00aacc;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.pie_right, .right {
clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
clip:rect(0,100px,auto,0);
}
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 150px;
font-size: 20px;
font-weight: bold;
color: #00aacc;
}

jquery如下:

$(function() {
$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6;
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
} else {
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
};
});
});

上述代码可以实现圆环进度条!

3.2 css方案

方法一:用图片方式,n张图片,不停的background-position位置变化,模拟1%到100%的情况!

方法二:

圆环css写法如下:

.circleprogress{
width: 160px;
height: 160px;
border:20px solid red;
border-radius: 50%;
}

不完整的圆如下写法:

.circleprogress{
width: 160px;
height: 160px;
border:20px solid red;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
border-radius: 50%;
}

但是不是45度角的倍数怎么办呢?如下代码可以用css动画实现进度条效果!

  .circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(232, 232, 12);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgb(232, 232, 12);
border-right:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(81, 197, 81);
border-bottom:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(225deg);
}
100%{
border-left:20px solid green;
border-bottom:20px solid green;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-bottom:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(232, 232, 12);
border-top:20px solid rgb(81, 197, 81);
border-right:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
100%{
border-top:20px solid green;
border-right:20px solid green;
border-bottom:20px solid green;
border-left:20px solid green;
-webkit-transform: rotate(225deg);
}
}

实现效果如下:

小结

上面提出了几种解决canvas绘制圆环出现模糊效果的解决方案,大家有什么其他更好的办法可以留言提出,相互交流。文章原创,转载务必联系注明!

炫意HTML5 » canvas绘制圆环进度条出现模糊效果解决方案

Java基础教程Android基础教程