前端基础_使用moveTo与lineTo路径绘制火柴人

Answer 1

绘制火柴人基础

在使用canvas进行图形绘制时，`moveTo(x,y)`与`lineTo(x,y)`这两个方法是基础中的基础，它们分别代表了移动画笔位置与在新旧坐标间绘制直线。`moveTo(x,y)`就像是提起画笔，将位置移动至新坐标(x,y)，而`lineTo(x,y)`则是在当前位置至新坐标间画一条直线。值得注意的是，这些方法只定义了路径，直到调用`stroke`或`fill`函数时才会真正绘制图形。

在绘制火柴人时，这些方法尤其重要。例如，`closePath`方法在路径绘制完成后，会将路径闭合。这在后续的填充或描边操作中非常有用。`closePath`方法能够通知canvas当前路径已经闭合，以便执行填充或描边操作。此外，路径可以随时被清除，使用`beginPath`重新绘制新的路径。

让我们通过实例来具体了解如何使用这些方法绘制一个简单的火柴人。

首先，获取canvas元素并设置上下文为2d，代码如下：

javascript
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

接着，创建一个300x300背景为蓝色的画布：

javascript
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 300, 300);

接下来，创建火柴人的头部。使用`arc`方法定义头部，填充为红色，边框为3像素：

javascript
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 30, 0, Math.PI*2, true);
context.fill();
context.stroke();

在绘制头部后，接下来绘制脸部。这里主要是眼睛和嘴巴，使用`beginPath`方法确保脸部路径与头部路径分开。

javascript
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 20, 0, Math.PI, false);
context.fill();
context.stroke();

绘制眼睛时，使用`moveTo`方法来绘制右眼，实现代码如下：

javascript
context.beginPath();
context.fillStyle = '#c00';
context.arc(90, 45, 3, 0, Math.PI*2, true);
context.fill();
context.stroke();
context.moveTo(113, 45);
context.arc(110, 45, 3, 0, Math.PI*2, true);
context.fill();
context.stroke();

完成头部和脸部后，开始绘制身体，包括上肢和下肢。在绘制身体部分时，多次应用了`moveTo`和`lineTo`方法。

javascript
context.beginPath();
context.moveTo(100, 80);
context.lineTo(100, 180);
context.lineTo(75, 250); // 左腿
context.moveTo(100, 180);
context.lineTo(125, 250); // 右腿
context.moveTo(100, 90);
context.lineTo(75, 140); // 左胳膊
context.moveTo(100, 90);
context.lineTo(125, 140); // 右胳膊
context.stroke();

最后，关闭路径，实现代码如下：

javascript
context.closePath();

至此，一个简单的火柴人就绘制完成了。通过这个实例，我们可以看到如何灵活运用`moveTo`、`lineTo`、`arc`和`closePath`等方法来实现复杂的图形绘制。