一個非常有用的函數(shù)融柬，而這個函數(shù)實際上并不能畫出任何東西辆雾，也是上面所描述的路徑列表的一部分，這個函數(shù)就是moveTo()
窒悔∥卦或者你可以想象一下在紙上作業(yè)，一支鋼筆或者鉛筆的筆尖從一個點到另一個點的移動過程简珠。
moveTo(x, y)
將筆觸移動到指定的坐標x以及y上阶界。
當canvas初始化或者beginPath()
調用后，你通常會使用moveTo()
函數(shù)設置起點聋庵。我們也能夠使用moveTo()
繪制一些不連續(xù)的路徑膘融。看一下下面的笑臉例子珍策。我將用到moveTo()
方法（紅線處）的地方標記了托启。
你可以嘗試一下，使用下邊的代碼片攘宙。只需要將其復制到之前的draw()
函數(shù)即可屯耸。
var canvas = document.querySelector("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
// arc(x, y, radius, startAngle, endAngle, anticlockwise)
// 畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓）蹭劈，從startAngle開始到endAngle結束疗绣，按照anticlockwise給定的方向（默認為順時針）來生成。
// 圓心點 75铺韧，75 半徑50 起始角度 0 角度Math.PI*2代表360度 true逆時針
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)系你的效果
