用Canvas创造属于你的机器猫

用Canvas绘制机器猫

现在让我们开始绘制机器猫。首先，我们需要创建一个新的Canvas元素。

<canvas id="canvas" width="500" height="500"></canvas>

接下来，我们需要获取Canvas的上下文。上下文对象允许我们绘制形状、线条、文本和其他图形。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

现在我们可以开始绘制机器猫了。首先，我们将绘制机器猫的身体。

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fillStyle = "#ffffff";
ctx.fill();

接下来，我们将绘制机器猫的眼睛。

ctx.beginPath();
ctx.arc(125, 125, 10, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();

ctx.beginPath();
ctx.arc(175, 125, 10, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();

接下来，我们将绘制机器猫的鼻子。

ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150, 175);
ctx.lineTo(175, 175);
ctx.lineTo(175, 150);
ctx.closePath();
ctx.fillStyle = "#000000";
ctx.fill();

最后，我们将绘制机器猫的嘴巴。

ctx.beginPath();
ctx.moveTo(125, 175);
ctx.lineTo(175, 175);
ctx.quadraticCurveTo(150, 200, 150, 225);
ctx.quadraticCurveTo(150, 200, 125, 175);
ctx.closePath();
ctx.fillStyle = "#000000";
ctx.fill();

现在，我们的机器猫就完成啦！您可以使用以下代码将机器猫导出为图像文件。

const dataURL = canvas.toDataURL("image/png");

const link = document.createElement("a");
link.download = "机器猫.png";
link.href = dataURL;
link.click();

结语

我希望您喜欢本教程。如果您有任何问题，请随时留言。