java画笑脸_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();

有联系你的效果