画布标签 - <canvas>

什么是 <canvas> 标签？

<canvas> 标签用于在HTML页面中创建一个绘图区域，你可以使用JavaScript在这个区域内绘制图形、动画和交互式内容。它提供了一个通过JavaScript API进行2D和3D绘图的环境。

基本语法

html 
<canvas id="myCanvas" width="400" height="200">
  您的浏览器不支持canvas元素。
</canvas>

核心属性

width 和 height 属性

width 和 height 属性用于指定画布的尺寸，以像素为单位。默认尺寸为300x150像素。

示例：

html 
<!-- 设置画布尺寸 -->
<canvas id="drawingCanvas" width="800" height="600"></canvas>

基本绘图示例

要在画布上绘图，你需要使用JavaScript获取画布上下文，然后调用上下文的绘图方法：

html 
<!-- HTML -->
<canvas id="myCanvas" width="400" height="200"></canvas>

<!-- JavaScript -->
<script>
  // 获取画布元素
  const canvas = document.getElementById("myCanvas");
  
  // 获取2D绘图上下文
  const ctx = canvas.getContext("2d");
  
  // 绘制矩形
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(50, 50, 150, 100);
  
  // 绘制边框
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 2;
  ctx.strokeRect(50, 50, 150, 100);
</script>

常用绘图方法

绘制矩形

javascript 
// 填充矩形
ctx.fillRect(x, y, width, height);

// 描边矩形
ctx.strokeRect(x, y, width, height);

// 清除矩形区域
ctx.clearRect(x, y, width, height);

绘制路径

javascript 
// 开始路径
ctx.beginPath();

// 移动到起始点
ctx.moveTo(x, y);

// 绘制直线到指定点
ctx.lineTo(x, y);

// 绘制圆弧
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

// 绘制贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

// 闭合路径
ctx.closePath();

// 填充路径
ctx.fill();

// 描边路径
ctx.stroke();

绘制文本

javascript 
// 设置文本样式
ctx.font = "30px Arial";
ctx.fillStyle = "#333333";
ctx.textAlign = "center";

// 填充文本
ctx.fillText("Hello Canvas", x, y);

// 描边文本
ctx.strokeText("Hello Canvas", x, y);

绘制图像

javascript 
// 加载图像
const img = new Image();
img.src = "image.jpg";
img.onload = function() {
  // 绘制图像
  ctx.drawImage(img, x, y);
  
  // 绘制缩放的图像
  ctx.drawImage(img, x, y, width, height);
  
  // 绘制图像的一部分
  ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
};

样式和颜色

设置颜色

javascript 
// 设置填充颜色
ctx.fillStyle = "#FF0000";
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

// 设置描边颜色
ctx.strokeStyle = "#00FF00";

设置线条样式

javascript 
// 设置线条宽度
ctx.lineWidth = 5;

// 设置线条末端样式
ctx.lineCap = "butt" | "round" | "square";

// 设置线条连接样式
ctx.lineJoin = "miter" | "round" | "bevel";

设置渐变

javascript 
// 创建线性渐变
const linearGradient = ctx.createLinearGradient(x1, y1, x2, y2);
linearGradient.addColorStop(0, "#FF0000");
linearGradient.addColorStop(1, "#00FF00");

// 创建径向渐变
const radialGradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient.addColorStop(0, "#FF0000");
radialGradient.addColorStop(1, "#00FF00");

// 使用渐变
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 400, 200);

设置阴影

javascript 
ctx.shadowColor = "#000000";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

动画示例

以下是一个简单的动画示例：

html 
<!-- HTML -->
<canvas id="animationCanvas" width="400" height="200"></canvas>

<!-- JavaScript -->
<script>
  const canvas = document.getElementById("animationCanvas");
  const ctx = canvas.getContext("2d");
  
  let x = 0;
  let speed = 2;
  
  function animate() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制移动的圆
    ctx.beginPath();
    ctx.arc(x, canvas.height / 2, 20, 0, Math.PI * 2);
    ctx.fillStyle = "#0066FF";
    ctx.fill();
    ctx.closePath();
    
    // 更新位置
    x += speed;
    
    // 边界检测
    if (x > canvas.width + 20 || x < -20) {
      speed = -speed;
    }
    
    // 循环动画
    requestAnimationFrame(animate);
  }
  
  // 开始动画
  animate();
</script>

最佳实践

  1. 始终设置width和height属性：直接在canvas元素上设置尺寸，而不是使用CSS缩放

  2. 提供替代内容：在canvas标签内提供浏览器不支持时的替代文本或内容

  3. 使用requestAnimationFrame：用于创建平滑的动画，而不是setTimeout或setInterval

  4. 优化绘图性能：

    • 减少绘制操作的数量
    • 使用离屏画布绘制复杂图形
    • 清除必要的最小区域

  5. 处理高分辨率屏幕：检测设备像素比，适当缩放画布

浏览器兼容性

<canvas> 标签在所有现代浏览器中都得到支持。2D上下文在所有支持canvas的浏览器中都可用，而WebGL（3D上下文）在较新的浏览器版本中支持良好。

总结

<canvas> 标签是HTML中用于创建动态图形和交互式内容的强大工具。通过JavaScript API，你可以绘制各种形状、文本、图像，创建动画和交互式应用。它广泛用于游戏开发、数据可视化、图像处理等领域。

最后更新：2026-02-07