掌握 Canvas：绘制简单图形，开启神奇艺术之旅

引言

踏入 Canvas 的艺术世界，它是一块画布，允许我们用代码绘制缤纷多彩的图形和动画。从简单的线条到复杂的设计，Canvas 赋予我们无穷无尽的可能性。本指南将带您从头开始，绘制出您的第一个 Canvas 作品，为您开启一段奇妙的艺术之旅。

画布基本操作

初始化画布

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

这段代码在 HTML 中创建了一个名为 myCanvas 的 Canvas 元素，其宽度为 500 像素，高度为 300 像素。

获取画笔

var ctx = myCanvas.getContext("2d");

getContext() 方法返回一个 CanvasRenderingContext2D 对象，可用于绘制形状、线条和文本。

绘制线条

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();

这将在画布上绘制一条从 (10, 10) 到 (100, 100) 的黑色线条。

绘制矩形

ctx.fillRect(20, 20, 100, 50);

这将在画布上绘制一个带有填充色的矩形，左上角坐标为 (20, 20)，宽度为 100 像素，高度为 50 像素。

绘制圆形

ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.fill();

这将在画布上绘制一个半径为 50 像素，中心点为 (150, 150) 的蓝色圆形。

动画和交互

使用 requestAnimationFrame

function animate() {
  // 绘制动画
  requestAnimationFrame(animate);
}

requestAnimationFrame() 方法会在浏览器每次准备重绘时调用指定的函数，从而实现动画。

添加交互

myCanvas.addEventListener("mousemove", function(e) {
  // 根据鼠标位置绘制图形
});

这将监听画布的鼠标移动事件，并根据鼠标位置绘制图形，实现交互式体验。

结语

掌握 Canvas 的基本操作，您就可以开始创建各种各样的图形和动画。从简单的线条到复杂的场景，Canvas 赋予您无穷的创造力。充分发挥您的想象力，让您的艺术在画布上绽放吧！

提示：

• 使用不同的颜色和线宽来增加视觉吸引力。
• 探索 Canvas 提供的各种 API 和特性，例如渐变、阴影和图案。
• 与 HTML、CSS 和 JavaScript 结合使用，打造更加动态和交互式的作品。