萌翻了的Canvas小黑猫，快来get！

2023-10-09 15:55:11

如何使用 Canvas 画出萌萌的猫咪

Canvas 是 HTML5 中的一项强大功能，可让你在网页上绘制精美的图形。让我们用它来绘制一只超萌的小黑猫，看看它有多么简单。

绘制猫咪的身体

首先，创建一个<canvas>元素并获取它的上下文。然后，使用 beginPath() 开始绘制，moveTo() 定义起始点，quadraticCurveTo() 用曲线连接点，closePath() 闭合路径，最后用 fill() 填充颜色，猫咪的身体就出现了！

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

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(150, 100, 150, 150);
ctx.quadraticCurveTo(150, 200, 100, 200);
ctx.quadraticCurveTo(50, 200, 50, 150);
ctx.quadraticCurveTo(50, 100, 100, 100);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();

绘制猫咪的头部

同样，开始绘制，定义起始点，用曲线连接点，闭合路径，填充颜色，猫咪的头部就跃然纸上！

ctx.beginPath();
ctx.moveTo(125, 75);
ctx.quadraticCurveTo(150, 50, 175, 75);
ctx.quadraticCurveTo(200, 100, 175, 125);
ctx.quadraticCurveTo(150, 150, 125, 125);
ctx.quadraticCurveTo(100, 100, 125, 75);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();

绘制猫咪的眼睛

这次使用 arc() 函数绘制圆形，它需要圆心坐标、半径、起始角度和结束角度。

// 左眼
ctx.beginPath();
ctx.arc(115, 85, 5, 0, Math.PI * 2, true);
ctx.fillStyle = "white";
ctx.fill();

// 右眼
ctx.beginPath();
ctx.arc(145, 85, 5, 0, Math.PI * 2, true);
ctx.fillStyle = "white";
ctx.fill();

绘制猫咪的鼻子

用 moveTo() 和 lineTo() 绘制三角形，然后用 stroke() 给它描边。

ctx.beginPath();
ctx.moveTo(130, 105);
ctx.lineTo(135, 115);
ctx.lineTo(140, 105);
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();

绘制猫咪的嘴巴

与鼻子类似，用 moveTo() 和 lineTo() 绘制曲线，并用 stroke() 描边。

ctx.beginPath();
ctx.moveTo(135, 120);
ctx.lineTo(140, 125);
ctx.lineTo(145, 120);
ctx.stroke();

绘制猫咪的胡须

用 moveTo() 和 lineTo() 绘制几条线段，并用 stroke() 描边。

ctx.beginPath();
ctx.moveTo(115, 85);
ctx.lineTo(95, 70);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(145, 85);
ctx.lineTo(165, 70);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(125, 75);
ctx.lineTo(105, 50);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(135, 75);
ctx.lineTo(155, 50);
ctx.stroke();