問題

近期用canvas繪製了圓環進度條，但是進度條出現周圍模糊的現象，針對這種現象，網上搜了搜，有人提問，但是貌似沒有很好的解決方案，針對這種情況，提出幾種解決方案，僅供參考！ 模糊效果如下：

解決方案

針對這種情況，我提出幾種解決思路。

一、運用hidpi-canvas-polyfill 的js進行解決

HiDPI Canvas Polyfill 是針對裝置提出的canvas高清解決方案，首先引入hidpi-canvas.js。

這個js會自動識別你的canvas,會把你的canvas變小，雖然不模糊了，但是不是我們想要的效果。（可以結合後面的方法進行改進）

具體使用方法大家可以看他的描述。在這裡就不展開講解了。

缺點： 這種方式雖然可以解決，但是感覺畢竟要引入一些js還有，進行自動化識別中，canvas可能會變小，還有，他會自動給canvas加了一個寬高，這些在一定情況下不是我們想要的。

二、指定預設寬高法

這種方式在一定程度上，可以解決我說的模糊問題。將上面模糊的程式碼進行如下改進。

<canvasid="pczren"data-process="70"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');varWc= pczren.width;varHc= 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如下：

<divclass="circle"style="left:220px"><divclass="pie_left"><divclass="left"></div></div><divclass="pie_right"><divclass="right"></div></div><divclass="mask"><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:50pxauto;
  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-a