返回

Canvas 入门指南（二）：如何用 Canvas 画一个滑稽的小丑

前端

在 入门篇 中，我们介绍了 Canvas 的基本概念和使用。今天，我们将更进一步，通过绘制一个滑稽的小丑来深入了解 Canvas 的绘图功能。

准备工作

在开始之前，请确保您已具备以下条件：

  • 文本编辑器（如 Visual Studio Code 或 Sublime Text）
  • 浏览器（如 Chrome 或 Firefox）
  • HTML 和 JavaScript 的基本知识

创建画布

首先，我们需要创建一个 HTML 文件并创建一个 <canvas> 元素。<canvas> 元素将作为我们的绘图表面。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

  <script>
    // 您的 JavaScript 代码将在此处
  </script>
</body>
</html>

获取 Canvas 上下文

下一步，我们需要获取 Canvas 上下文，它允许我们与 Canvas 进行交互并绘制图形。

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

绘制小丑

现在，让我们逐步绘制小丑：

1. 绘制头部

// 绘制头部
ctx.beginPath();
ctx.arc(250, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();

2. 绘制眼睛

// 绘制眼睛
ctx.beginPath();
ctx.arc(230, 140, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();

ctx.beginPath();
ctx.arc(270, 140, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();

3. 绘制鼻子

// 绘制鼻子
ctx.beginPath();
ctx.moveTo(250, 160);
ctx.lineTo(240, 200);
ctx.lineTo(260, 200);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

4. 绘制嘴巴

// 绘制嘴巴
ctx.beginPath();
ctx.moveTo(230, 220);
ctx.lineTo(270, 220);
ctx.quadraticCurveTo(250, 250, 250, 220);
ctx.fillStyle = 'black';
ctx.fill();

5. 绘制帽子

// 绘制帽子
ctx.beginPath();
ctx.moveTo(220, 100);
ctx.lineTo(280, 100);
ctx.lineTo(280, 50);
ctx.lineTo(220, 50);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();

6. 绘制衣领

// 绘制衣领
ctx.beginPath();
ctx.moveTo(220, 250);
ctx.lineTo(280, 250);
ctx.quadraticCurveTo(250, 300, 250, 250);
ctx.fillStyle = 'yellow';
ctx.fill();

7. 绘制身体

// 绘制身体
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.lineTo(250, 400);
ctx.lineTo(230, 400);
ctx.lineTo(230, 250);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();

8. 绘制手

// 绘制手
ctx.beginPath();
ctx.moveTo(220, 400);
ctx.lineTo(280, 400);
ctx.lineTo(280, 380);
ctx.lineTo(220, 380);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

9. 绘制腿

// 绘制腿
ctx.beginPath();
ctx.moveTo(250, 400);
ctx.lineTo(230, 480);
ctx.lineTo(270, 480);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();

结语

恭喜您！您已经成功绘制了一个滑稽的小丑。本教程涵盖了 Canvas 的基本绘图功能，您可以通过探索其他形状、路径和填充技术来进一步扩展您的知识。

如果您对本教程或 Canvas 有任何疑问，请随时在评论区留言。