JavaScript - 画布：数字绘图的初学者指南

你好，有抱负的程序员！我很高兴能成为你进入JavaScript和Canvas世界的向导。作为一个教授计算机科学超过十年的人，我可以告诉你Canvas是学习中最有趣和最有回报的主题之一。它就像是在你的网页浏览器中拥有一个数字游乐场！

什么是Canvas？

在我们深入研究代码之前，让我们先了解一下Canvas是什么。想象你有一张空白的纸和一套彩色笔。在数字世界中，Canvas基本上就是这样——你可以在网页上的空白区域使用JavaScript绘制任何你想要的东西！

Canvas随着HTML5的出现而被引入，并迅速成为了一个强大的工具，用于直接在网页浏览器中创建图形、动画甚至游戏。它就像是在你的代码编辑器中拥有一个迷你艺术工作室！

使用JavaScript处理Canvas

现在，让我们卷起袖子开始绘画吧！首先，我们需要在HTML中设置我们的Canvas。

<canvas id="myCanvas" width="400" height="200"></canvas>

这会创建一个宽400像素、高200像素的canvas元素。把它想象成你的数字绘图板。

开始使用Canvas

要在我们的canvas上开始绘制，我们需要在JavaScript代码中获取对它的引用并获取其绘图上下文。

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

getContext('2d')方法给我们一个2D渲染上下文——我们将在canvas上绘图的工具。

绘制形状

让我们从简单的东西开始——绘制一个矩形！

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

这段代码绘制了一个起点为坐标(50, 50)、宽度为100像素、高度为75像素的蓝色矩形。就像告诉你的数字笔，“嘿，在这里画一个蓝色矩形，让它这么大！”

绘制线条

现在，让我们尝试绘制一条线：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

这段代码开始一个新路径，将“笔”移动到(50, 50)，然后画一条线到(200, 100)，最后描边路径使其可见。就像玩连线游戏，但用的是代码！

绘制圆形

我们来画一个笑脸怎么样？首先，让我们画一个圆形作为脸：

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

这会画一个有黑色轮廓的黄色圆形。arc方法可能看起来有点吓人，但把它想象成告诉你的笔，“在(200, 100)为中心画一个半径为50的圆，从0开始一直画到完整的一圈（那就是Math.PI * 2的意思）。”

添加文本

让我们在canvas上添加一些文本：

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

这段代码将字体设置为20像素的Arial，颜色设置为黑色，并在位置(10, 30)处写入“Hello, Canvas!”。

示例

现在我们已经涵盖了基础知识，让我们看看一些有趣的示例，看看Canvas真正能做什么！

示例1：绘制房屋

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

// 绘制房屋主体
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// 绘制屋顶
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// 绘制门
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// 绘制窗户
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

这段代码绘制了一个简单的房屋，有棕色的主体、红色的屋顶、蓝色的门和黄色的窗户。就像用代码块而不是乐高积木建造房屋！

示例2：动画圆形

让我们让东西动起来！这是一个简单的弹跳圆形动画：

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

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

这段代码创建了一个绿色圆形，它在canvas上弹跳。就像创建你自己的小乒乓球游戏！

Canvas方法表

以下是我们使用过和一些额外的一些常见的Canvas方法：

方法	描述
fillRect(x, y, width, height)	绘制一个填充矩形
strokeRect(x, y, width, height)	绘制一个矩形轮廓
clearRect(x, y, width, height)	清除指定的矩形区域
beginPath()	开始一个新路径
moveTo(x, y)	将路径移动到指定点
lineTo(x, y)	绘制一条线到指定点
arc(x, y, radius, startAngle, endAngle)	绘制一个弧或圆形
fill()	填充当前路径
stroke()	描绘当前路径
fillText(text, x, y)	在canvas上绘制填充文本
strokeText(text, x, y)	在canvas上绘制文本轮廓

记住，学习编码就像学习一门新语言。它需要时间和练习，但在你意识到之前，你将用Canvas创造出惊人的东西！继续尝试，尝试组合不同的形状和方法，最重要的是，享受其中的乐趣。谁知道呢？下一个大的网页游戏可能就是用Canvas由你创造的！

Credits: Image by storyset