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

问题

近期用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指定一个宽高，然后半径只要小于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如下：

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绘制圆环出现模糊效果的解决方案，大家有什么其他更好的办法可以留言提出，相互交流。文章原创，转载务必联系注明！