HTML Canvas操作

HTML Canvas操作

HTML Canvas操作是指通过JavaScript动态控制HTML5的<canvas>元素进行2D图形绘制的技术。Canvas提供了一块空白画布，开发者可以通过脚本语言（通常是JavaScript）在其上绘制图形、动画、游戏画面等交互式内容。

基本介绍

<canvas>元素是HTML5标准的一部分，它创建一个固定大小的绘图区域，允许开发者通过JavaScript调用绘图API进行像素级操作。与SVG不同，Canvas是即时模式（immediate mode）图形系统，绘制完成后不保留对象信息。

核心特点

• 分辨率相关：画布尺寸由width/height属性决定（单位：像素）
• 无DOM节点：绘制图形不会生成可被CSS选择器选中的元素
• 高性能：适合处理大量动态图形（如游戏、数据可视化）
• API丰富：支持路径、文本、图像、变换、合成等操作

基础用法

创建Canvas

首先需要在HTML中定义canvas元素：

<canvas id="myCanvas" width="500" height="300">
  您的浏览器不支持Canvas，请升级到现代浏览器
</canvas>

获取绘图上下文

通过JavaScript获取2D渲染上下文（目前所有浏览器均支持2D上下文）：

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

绘图API详解

基本形状绘制

常用绘图方法

方法	描述	示例
fillRect(x,y,w,h)	绘制填充矩形	ctx.fillRect(10,10,100,50)
strokeRect(x,y,w,h)	绘制矩形边框	ctx.strokeRect(10,70,100,50)
clearRect(x,y,w,h)	清除矩形区域	ctx.clearRect(15,15,90,40)

路径绘制

路径由一系列子路径（直线、曲线等）组成：

ctx.beginPath();          // 开始新路径
ctx.moveTo(50, 50);       // 移动笔触到起点
ctx.lineTo(150, 150);     // 添加直线段
ctx.lineTo(50, 150);      // 继续绘制
ctx.closePath();          // 闭合路径（可选）
ctx.stroke();             // 描边路径
// 或使用 ctx.fill() 填充闭合路径

样式控制

常用样式属性

属性	描述	示例
fillStyle	填充颜色/渐变/图案	ctx.fillStyle = '#FF0000'
strokeStyle	描边颜色/渐变/图案	ctx.strokeStyle = 'rgba(0,0,255,0.5)'
lineWidth	线条宽度(像素)	ctx.lineWidth = 3

高级特性

图像处理

可以在画布上绘制图像并操作像素数据：

const img = new Image();
img.src = 'example.png';
img.onload = function() {
  // 绘制原始图像
  ctx.drawImage(img, 0, 0);
  
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  // 修改像素（例如转换为灰度）
  for(let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i+1] + data[i+2]) / 3;
    data[i] = avg;     // R
    data[i+1] = avg;   // G
    data[i+2] = avg;   // B
    // Alpha通道(data[i+3])保持不变
  }
  
  // 放回修改后的像素
  ctx.putImageData(imageData, 0, 0);
};

变换操作

Canvas支持仿射变换（affine transformations）：

graph LR A[原始坐标系] --> B[平移 translate] B --> C[旋转 rotate] C --> D[缩放 scale] D --> E[应用变换]

ctx.save();              // 保存当前状态
ctx.translate(100, 100); // 移动原点
ctx.rotate(Math.PI/4);   // 旋转45度
ctx.scale(1.5, 1.5);     // 放大1.5倍
// 在此状态下绘制图形
ctx.restore();           // 恢复之前保存的状态

性能优化

对于复杂应用，需注意：

• 使用requestAnimationFrame实现动画
• 分层渲染（多个叠加的canvas元素）
• 避免频繁的canvas状态改变
• 对静态内容使用缓存

实际应用案例

动态图表

使用Canvas绘制实时更新的数据图表：

function drawChart(data) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制坐标轴
  ctx.beginPath();
  ctx.moveTo(50, 250);
  ctx.lineTo(450, 250);
  ctx.moveTo(50, 50);
  ctx.lineTo(50, 250);
  ctx.stroke();
  
  // 绘制数据线
  ctx.beginPath();
  data.forEach((value, i) => {
    const x = 50 + i * (400 / (data.length-1));
    const y = 250 - value * 2;
    if(i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  });
  ctx.strokeStyle = 'blue';
  ctx.stroke();
}

简单游戏

实现一个基础的碰撞检测：

let ball = { x:100, y:100, radius:15, dx:2, dy:2 };

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制球
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
  ctx.fillStyle = 'red';
  ctx.fill();
  
  // 更新位置
  ball.x += ball.dx;
  ball.y += ball.dy;
  
  // 边界检测
  if(ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) 
    ball.dx = -ball.dx;
  if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0)
    ball.dy = -ball.dy;
  
  requestAnimationFrame(update);
}
update();

数学基础

Canvas中的坐标系使用笛卡尔坐标系，但Y轴向下为正方向：

$\{\begin{array}{l}{x}^{\prime }=x\cdot \cos \theta -y\cdot \sin \theta \\ y^{\prime }=x\cdot \sin \theta +y\cdot \cos \theta \end{array}$

旋转公式（θ为旋转角度）

常见问题

Q: 为什么我的Canvas绘制内容模糊？ A: 可能原因：

• CSS设置的尺寸与canvas的width/height属性不匹配
• 未正确使用整数坐标（抗锯齿导致模糊）

Q: 如何实现Canvas内容的保存？ A: 使用canvas.toDataURL()方法生成图像数据：

const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'canvas-image.png';
link.href = dataURL;
link.click();

扩展阅读

• WebGL（Canvas的3D上下文）
• OffscreenCanvas（Web Worker中的Canvas操作）
• Canvas的合成与混合模式

通过系统学习Canvas API，开发者可以创建从简单的图形展示到复杂的交互式应用等各种视觉效果。建议通过实际项目练习来巩固这些概念。