首頁(yè) 猿問(wèn) Canvas 動(dòng)態(tài)繪制圓有鋸齒

Canvas 動(dòng)態(tài)繪制圓有鋸齒

JavaScript

POPMUISE 2018-08-07 11:10:47

測(cè)試地址：http://codepen.io/sanonz/pen/ezzaYb?editors=0011每次繪制的時(shí)候都用上次繪制的結(jié)束角作為開始角，整體繪制出來(lái)銜接處怎么會(huì)有縫隙？

查看完整描述

1 回答

蕪湖不蕪

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

調(diào)用stroke方法描邊并將strokeStyle顏色和fillstyle設(shè)置成相同的就不會(huì)出現(xiàn)縫隙
縫隙的出現(xiàn)可能時(shí)因?yàn)橄袼?，顏色過(guò)渡，斜線總是帶鋸齒的有關(guān)~

    function draw(){
        var end = easeOut(t, sAngle, eAngle, 100) / 100;

        console.log(end);

        ctx.beginPath();
        ctx.moveTo(width / 2, height / 2);//A
        ctx.arc(width / 2, height / 2, width / 2, sAngle, end);//B

        ctx.fillStyle = '#00af0b';//C
        ctx.strokeStyle = "#00af0b";//D
        ctx.fill();
        ctx.stroke();
        sAngle = end;        if (t < 100) {
            t++;
            requestAnimationFrame(draw2);
        }
    }

運(yùn)行下面的代碼我們能發(fā)現(xiàn)，垂直位置的那條縫隙是看不到的，其它的非垂直的斜線的地方都是有的

   function draw1(){
        ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.rotate(t*10 * Math.PI / 180);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.arc(0, 0, width / 2, 0, 10* Math.PI / 180);
        ctx.fillStyle = '#00af0b';
        ctx.fill();
        ctx.restore();

        console.log(t);

    }


    (function doDraw(){
        draw1();
        t++;
        if(t<10){
            requestAnimationFrame(doDraw);
        }

    }());

反對(duì) 回復(fù) 2018-09-17