Canvas基础操作：构建互动式图形画布的指南

前端

2024-01-24 13:02:25

Canvas：点亮网页互动图形

探索画布的无限可能

Canvas 是一种 HTML 元素，让开发者可以在网页上创造生动、交互式的图形。它的强大功能和灵活性使其成为在 Web 应用程序和游戏中呈现视觉效果的理想选择。

什么是 Canvas？

Canvas 是一个 2D 绘图上下文，它允许你直接在网页上使用 JavaScript 绘制图形。它提供了诸如线条、矩形、圆形和图像等丰富的绘制 API，使得创建复杂且美观的图形变得轻而易举。

Canvas 的基本功能

绘制基本形状：

Canvas 提供了多种绘制基本形状的方法：

矩形：使用 fillRect() 方法填充指定大小和位置的矩形区域。
圆形：使用 arc() 方法绘制指定中心点、半径和起始结束角度的圆弧。
线条：使用 beginPath() 和 stroke() 方法绘制连接一组点的线条。

变换：

变换操作允许你对图形进行移动、缩放和旋转：

平移：使用 translate() 方法将画布的原点平移到指定的位置。
缩放：使用 scale() 方法按指定比例缩放画布。
旋转：使用 rotate() 方法按指定角度旋转画布。

文本和图像：

Canvas 还支持文本和图像的呈现：

文本：使用 fillText() 和 strokeText() 方法在画布上绘制文本。
图像：使用 drawImage() 方法将图像绘制到画布上。

事件处理：

事件处理允许 Canvas 响应用户交互，例如鼠标点击、移动和键盘输入。

鼠标事件：使用 addEventListener() 方法可以侦听单击、移动和悬停等鼠标事件。
键盘事件：addEventListener() 方法还可以用来侦听键盘按下和释放等键盘事件。

实用示例：创建交互式画布

为了展示 Canvas 的强大功能，我们创建一个允许你绘制任意形状的交互式画布：

// 获取画布元素
const canvas = document.getElementById("canvas");

// 获取画布上下文
const ctx = canvas.getContext("2d");

// 监听鼠标事件
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);

// 绘制状态变量
let isDrawing = false;

// 开始绘制
function startDrawing(e) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);
}

// 绘制
function draw(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
}

// 停止绘制
function stopDrawing() {
  isDrawing = false;
  ctx.closePath();
}