一個(gè)非常有用的函數(shù)，而這個(gè)函數(shù)實(shí)際上并不能畫出任何東西，也是上面所描述的路徑列表的一部分，這個(gè)函數(shù)就是moveTo()
。或者你可以想象一下在紙上作業(yè)，一支鋼筆或者鉛筆的筆尖從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的移動(dòng)過程。
moveTo(x, y)

將筆觸移動(dòng)到指定的坐標(biāo)x以及y上。

當(dāng)canvas初始化或者beginPath()
調(diào)用后，你通常會(huì)使用moveTo()
函數(shù)設(shè)置起點(diǎn)。我們也能夠使用moveTo()
繪制一些不連續(xù)的路徑。看一下下面的笑臉例子。我將用到moveTo()
方法（紅線處）的地方標(biāo)記了。
你可以嘗試一下，使用下邊的代碼片。只需要將其復(fù)制到之前的draw()
函數(shù)即可。

        var canvas = document.querySelector("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            // arc(x, y, radius, startAngle, endAngle, anticlockwise)
            // 畫一個(gè)以（x,y）為圓心的以radius為半徑的圓?。▓A），從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時(shí)針）來生成。

            // 圓心點(diǎn)  75，75  半徑50 起始角度 0  角度Math.PI*2代表360度  true逆時(shí)針
            ctx.arc(75,75,50,0,Math.PI*2,true); // 繪制
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false);
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true);
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true);
            ctx.stroke();
        }

效果

想看到連線的效果可以去掉代碼中的moveTo();

有聯(lián)系你的效果