canvas--圆形倒计时

  <canvas width="500px;" height="400px;" id="canvas"></canvas>
    <div class="canvas-djs">

    </div>

    <script>
    //canvas 倒计时
    var canvas2 = document.getElementById("canvas");
    c2 = canvas2.getContext("2d");
    //起始一条路径 底部不动的环
    // c2.beginPath();
    // c2.lineWidth = 14;
    // c2.strokeStyle = '#ffffff4d';
    // c2.arc(68, 68, 60, 0, 2 * Math.PI);
    // c2.stroke();
//绘制当前进度
function jdt(x) {
    // 进度条
 
   // c2.save();
    c2.clearRect(0, 0, 146, 146);
    //
    //起始一条路径
    c2.beginPath();
    c2.lineWidth = 14;
    c2.strokeStyle = '#ccc';
    c2.arc(68, 68, 60, 0, 2 * Math.PI);
    c2.stroke();
    //
    c2.beginPath();
    c2.lineWidth = 14;
    c2.strokeStyle = '#FEAD43';
    c2.lineCap = "round";
    c2.arc(68, 68, 60, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
    c2.stroke();
}
//倒计时部分最好用div 不是用canvas
 

 
 
//进度条方法参数 秒
function f1(x) {
   
    var x1 = x;
    var t1 = 0;
    totalTime = x;

    // 60毫秒 执行一次定时器

     a = setInterval(function () {
        // console.log('先执行')
        t1 = t1 + 0.1;
        if (t1 >= 100) {
            clearInterval(a);
            clearInterval(b);
            console.log("0:0:0")
            jdt(100);
        } else {
            jdt(t1)
        }
    }, x1);



    var text = x;
    tm = leftTimer(text);
    // console.log(tm)
     b = setInterval(function () {
    //    console.log('后执行')
        text = text - 1;
        if (text <= 0) {
            clearInterval(b);
            clearInterval(a);
            jdt(100);
            console.log("0:0:0")
 
        } else {
            tm = leftTimer(text);
            // console.log(tm)
        }
    }, 1000);
 
}
 
    //时间格式转化
    function leftTimer(t) {
        // console.log(t)


        var leftTime = (t); //计算剩余的秒数
        var minutes = parseInt(leftTime / 60 % 60, 10);//计算剩余的分钟
        var seconds = parseInt(leftTime % 60, 10);//计算剩余的秒数
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        function checkTime(i) { //将0-9的数字前面加上0，例1变为01
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        return minutes + ":" + seconds;
    }
    f1(60)

问题一

canvas 有锯齿毛刺的情况

1，循环路径 如进度条增长的过程 没清除前一步路径 会 有毛刺

2，本身没有毛刺 ，或者线条 在像素点中间位置

解决方案 ：

手动开启HTML5 Canvas的抗锯齿可以用

canvas.getContext(‘2d’).imageSmoothingEnabled = true;
或者直接把整个画布偏移0.5像素：

canvas.getContext(‘2d’).translate(0.5, 0.5);
ps 这只对 canvas 本身的毛刺有效果，如果是重复路径画的你自己造成的毛刺无效

重复路径造成的 毛刺 再每次绘画路径先清除路径或者情况画布