Canvas Design Skill 入门指南：从零基础到实战应用

1次阅读

共计 1939 个字符，预计需要花费 5 分钟才能阅读完成。

Canvas 是 HTML5 提供的一个绘图标签，可以把它想象成一块空白的画布。我们通过 JavaScript 在这个画布上绘制各种图形、动画甚至游戏。它特别适合需要动态生成图像的场景，比如数据可视化、小游戏开发等。

与 SVG 不同，Canvas 是位图绘制方式，一旦绘制完成就无法直接修改其中某个元素，需要重新绘制。这也是为什么它性能更好的原因。

首先需要在 HTML 中创建一个 canvas 元素：

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

然后在 JavaScript 中获取这个元素并设置绘图上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 2d 表示二维绘图

矩形：Canvas 提供了直接绘制矩形的方法

ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 100); // 绘制填充矩形 (x, y, width, height)

ctx.strokeStyle = 'red'; // 设置描边颜色
ctx.strokeRect(200, 50, 100, 100); // 绘制描边矩形

圆形：需要通过路径来绘制

ctx.beginPath();
ctx.arc(150, 250, 50, 0, Math.PI * 2); // (x, y, 半径, 起始角度, 结束角度)
ctx.fillStyle = 'green';
ctx.fill(); // 填充圆形

ctx.beginPath();
ctx.arc(300, 250, 50, 0, Math.PI * 2);
ctx.strokeStyle = 'purple';
ctx.stroke(); // 描边圆形

路径是 Canvas 中非常重要的概念，可以绘制任意形状：

ctx.beginPath();
ctx.moveTo(50, 350); // 起点
ctx.lineTo(150, 400); // 第一条线
ctx.lineTo(50, 450); // 第二条线
ctx.closePath(); // 闭合路径
ctx.stroke(); // 描边

让我们创建一个简单的弹跳球动画：

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

// 球的初始位置和速度
let x = 100;
let y = 100;
let dx = 2;
let dy = 2;
const radius = 20;

function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制球
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();

  // 更新位置
  x += dx;
  y += dy;

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

  // 循环动画
  requestAnimationFrame(animate);
}

// 启动动画
animate();