超越画布：用 Canvas 挥洒数字艺术

前端

2023-12-27 11:01:55

探索 Canvas 的神奇世界，它是一个灵活的数字画布，让艺术家和程序员尽情发挥创造力。抛开纸笔的束缚，踏入数字领域的无限可能，用鼠标和代码作画，创造令人惊叹的视觉盛宴。

1. 踏入 Canvas 世界

就像一张空白画布，Canvas 让你从无到有开始创作。这个基于 HTML5 的元素就像一个虚拟的艺术工作室，允许你用 JavaScript 代码绘画和操纵图形。让我们从最基本的开始，了解 Canvas 的核心概念。

Context 对象： Canvas 的画笔和调色板，提供了一系列用于绘制、填充和管理图形的方法。
坐标系： Canvas 使用笛卡尔坐标系，以 (0,0) 为原点，向右为 X 轴，向下为 Y 轴。
像素： Canvas 由称为像素的小方块组成，每个像素都有自己的颜色和透明度值。

2. 绘制基本形状

掌握了这些基础知识，就可以开始绘制基本形状了。就像拿起画笔一样，只需几行代码，就能在 Canvas 上绘制矩形、圆形、线条和多边形。

矩形： fillRect() 和 strokeRect() 方法绘制实心和空心矩形。
圆形： fillArc() 和 strokeArc() 方法绘制扇形和圆形。
线条： beginPath()、moveTo() 和 lineTo() 方法绘制线条，而 stroke() 方法为线条着色。
多边形： beginPath()、moveTo() 和 lineTo() 方法可用于创建复杂的路径，而 closePath() 方法闭合路径以形成多边形。

3. 填充图形

填充图形让它们栩栩如生，Canvas 提供了多种方法来填充颜色和渐变。

填充颜色： fillStyle 属性设置填充颜色，而 fill() 方法应用填充。
渐变填充： createLinearGradient() 和 createRadialGradient() 方法创建线性或径向渐变，为图形添加深度和纹理。

4. 绘制图像

将图像融入你的 Canvas 作品中，就像将画笔蘸入墨水一样。

drawImage()： 将图像从外部源加载到 Canvas 上。
imageSmoothingEnabled： 控制图像缩放时的平滑度。

5. 文本渲染

用文字表达你的创意，Canvas 可以让你绘制文本并控制其外观。

font： 设置字体系列、大小和样式。
fillText() 和 strokeText()： 绘制填充或描边的文本。
textBaseline 和 textAlign： 控制文本在 Canvas 上的位置和对齐方式。

6. 动画与交互

让你的 Canvas 作品栩栩如生，添加动画和交互元素。

requestAnimationFrame()： 一个循环函数，每帧更新 Canvas，实现动画。
事件处理程序： 侦听鼠标、键盘和触摸事件，为你的作品增添交互性。

7. 代码示例

现在，让我们用一些代码示例将这些概念付诸实践。

// 绘制一个填充的蓝色矩形
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 150, 100);

// 绘制一个绿色的空心圆
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.arc(250, 250, 50, 0, Math.PI * 2);
ctx.stroke();

// 绘制一个从左上角到右下角的红色线条
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 400);
ctx.strokeStyle = "red";
ctx.stroke();

// 加载外部图像
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 100, 100);
};
img.src = "my-image.jpg";