HTML 中的 Canvas 样式设置全解

在 HTML5 中，<canvas> 元素提供了一个强大的绘图接口，允许开发者通过 JavaScript 实现各种图形和动画效果。为了充分利用 <canvas> 的功能，理解其样式设置是至关重要的。本文将详细介绍如何在 HTML 中设置 <canvas> 的各种样式属性，帮助你实现更加丰富和灵活的绘图效果。

1. 基础设置

1.1 创建 Canvas

首先，在 HTML 文件中添加一个 <canvas> 元素：

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

注意：width 和 height 属性定义了画布的实际尺寸（以像素为单位），而 CSS 样式中的宽度和高度仅影响画布的显示大小。

1.2 获取 Canvas 上下文

在 JavaScript 文件中，使用 getContext('2d') 方法获取 canvas 的上下文对象：

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

2. 颜色与透明度

2.1 设置填充颜色

使用 fillStyle 属性设置填充颜色：

javascript">ctx.fillStyle = 'red'; // 设置填充颜色为红色

也可以使用 RGB 或 RGBA 格式：

javascript">ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色

2.2 设置描边颜色

使用 strokeStyle 属性设置描边颜色：

javascript">ctx.strokeStyle = 'blue'; // 设置描边颜色为蓝色

同样支持 RGB 和 RGBA 格式：

javascript">ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色

2.3 设置透明度

使用 globalAlpha 属性设置整个画布的透明度：

javascript">ctx.globalAlpha = 0.5; // 设置透明度为50%

3. 线条样式

3.1 设置线条宽度

使用 lineWidth 属性设置线条宽度：

javascript">ctx.lineWidth = 5; // 设置线条宽度为5px

3.2 设置线条端点样式

使用 lineCap 属性设置线条端点样式，可选值有 'butt'、'round' 和 'square'：

javascript">ctx.lineCap = 'round'; // 设置线条端点为圆形

3.3 设置线条连接样式

使用 lineJoin 属性设置线条连接处的样式，可选值有 'bevel'、'round' 和 'miter'：

javascript">ctx.lineJoin = 'round'; // 设置线条连接处为圆角

3.4 设置虚线样式

使用 setLineDash 方法设置虚线样式，参数为数组 [实线长度, 空白长度]：

javascript">ctx.setLineDash([10, 5]); // 设置虚线样式为10px实线，5px空白

3.5 设置虚线偏移量

使用 lineDashOffset 属性设置虚线偏移量：

javascript">ctx.setLineDash([10, 5]);
ctx.lineDashOffset = 5; // 设置虚线偏移量为5px

4. 文本样式

4.1 设置字体

使用 font 属性设置字体样式，格式类似于 CSS 字体属性：

javascript">ctx.font = 'italic bold 20px Arial'; // 设置字体样式为斜体、加粗、20px的Arial字体

4.2 设置文本对齐方式

使用 textAlign 属性设置文本对齐方式，可选值有 'left'、'center' 和 'right'：

javascript">ctx.textAlign = 'center'; // 设置文本对齐方式为居中

4.3 设置文本基线

使用 textBaseline 属性设置文本基线，可选值有 'top'、'middle'、'bottom' 和 'alphabetic'：

javascript">ctx.textBaseline = 'middle'; // 设置文本基线为中间

5. 渐变与阴影

5.1 线性渐变

使用 createLinearGradient 方法创建线性渐变：

javascript">const gradient = ctx.createLinearGradient(0, 0, 200, 0); // 创建从左到右的线性渐变
gradient.addColorStop(0, 'red'); // 渐变起始颜色为红色
gradient.addColorStop(1, 'blue'); // 渐变结束颜色为蓝色
ctx.fillStyle = gradient; // 使用渐变作为填充颜色

5.2 径向渐变

使用 createRadialGradient 方法创建径向渐变：

javascript">const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100); // 创建径向渐变
gradient.addColorStop(0, 'red'); // 渐变中心颜色为红色
gradient.addColorStop(1, 'blue'); // 渐变边缘颜色为蓝色
ctx.fillStyle = gradient; // 使用渐变作为填充颜色

5.3 设置阴影

使用 shadowColor、shadowOffsetX、shadowOffsetY 和 shadowBlur 属性设置阴影效果：

javascript">ctx.shadowOffsetX = 10; // 设置阴影水平偏移10px
ctx.shadowOffsetY = 10; // 设置阴影垂直偏移10px
ctx.shadowBlur = 5; // 设置阴影模糊半径5px

6. 裁剪与变换

6.1 裁剪区域

使用 clip 方法裁剪当前路径：

javascript">ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2, true); // 创建一个圆形路径
ctx.clip(); // 将该圆形路径作为裁剪区域
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 200, 150); // 只有圆形区域内的部分会被填充

6.2 平移变换

使用 translate 方法平移坐标系：

javascript">ctx.translate(50, 50); // 将坐标系原点平移到(50, 50)

6.3 缩放变换

使用 scale 方法缩放坐标系：

javascript">ctx.scale(2, 2); // 将坐标系缩放2倍

6.4 旋转变换

使用 rotate 方法旋转坐标系：

javascript">ctx.rotate(Math.PI / 4); // 将坐标系旋转45度（π/4弧度）

6.5 复合变换

可以组合使用 save 和 restore 方法保存和恢复变换状态：

javascript">ctx.save(); // 保存当前变换状态
ctx.translate(50, 50);
ctx.scale(2, 2);
ctx.restore(); // 恢复之前的变换状态

7. 图像处理

7.1 绘制图像

使用 drawImage 方法绘制图像：

javascript">const img = new Image();
img.src = 'your-image-url.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 150); // 在(0, 0)位置绘制宽200px高150px的图像
};

7.2 图像裁剪

可以通过指定裁剪区域来裁剪图像：

javascript">ctx.drawImage(img, 0, 0, 100, 100, 0, 0, 200, 200); // 裁剪图像并放大显示

7.3 图像滤镜

虽然 <canvas> 不直接支持 CSS 滤镜，但可以通过 getImageData 和 putImageData 方法进行像素级操作来实现类似效果。例如，简单的灰度转换：

javascript">const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  
  // 计算灰度值
  const gray = 0.299 * r + 0.587 * g + 0.114 * b;
  
  // 设置灰度值
  data[i] = gray;     // Red
  data[i + 1] = gray; // Green
  data[i + 2] = gray; // Blue
}

ctx.putImageData(imageData, 0, 0);

8. 其他功能

8.1 测量文本宽度

使用 measureText 方法测量文本宽度：

javascript">const metrics = ctx.measureText('Hello World');
console.log(metrics.width); // 输出文本的宽度

8.2 清除画布

使用 clearRect 方法清除画布：

javascript">ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布

8.3 更新画布

在 HTML 中，通常不需要显式调用更新方法，因为所有的绘图操作都会立即生效。但在某些框架或库中，可能需要手动刷新画布。

示例代码

以下是一个完整的示例代码，展示了如何使用上述的各种样式设置来绘制复杂的图形：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Styles</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

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

    // 设置背景颜色
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制一个矩形
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fillRect(50, 50, 200, 100);

    // 绘制一条带虚线的路径
    ctx.beginPath();
    ctx.moveTo(50, 200);
    ctx.lineTo(250, 200);
    ctx.setLineDash([10, 5]);
    ctx.stroke();

    // 设置文字样式并绘制文本
    ctx.font = 'italic bold 24px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'blue';
    ctx.fillText('Hello Canvas', 250, 300);

    // 创建并应用线性渐变
    const gradient = ctx.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'blue');
    ctx.fillStyle = gradient;
    ctx.fillRect(50, 350, 200, 50);

    // 应用阴影
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 5;
    ctx.fillStyle = 'green';
    ctx.fillRect(300, 50, 150, 100);

    // 平移、缩放和旋转变换
    ctx.save();
    ctx.translate(300, 300);
    ctx.scale(2, 2);
    ctx.rotate(Math.PI / 4);
    ctx.fillStyle = 'purple';
    ctx.fillRect(-25,