canvas 画笑脸

一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是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();

有联系你的效果