一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()
。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()
调用后，你通常会使用moveTo()
函数设置起点。我们也能够使用moveTo()
绘制一些不连续的路径。看一下下面的笑脸例子。我将用到moveTo()
方法（红线处）的地方标记了。
你可以尝试一下，使用下边的代码片。只需要将其复制到之前的draw()
函数即可。
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();
有联系你的效果
