在 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 的上下文对象：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
2. 颜色与透明度
2.1 设置填充颜色
使用 fillStyle 属性设置填充颜色：
ctx.fillStyle = 'red'; // 设置填充颜色为红色
也可以使用 RGB 或 RGBA 格式：
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
2.2 设置描边颜色
使用 strokeStyle 属性设置描边颜色：
ctx.strokeStyle = 'blue'; // 设置描边颜色为蓝色
同样支持 RGB 和 RGBA 格式：
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
2.3 设置透明度
使用 globalAlpha 属性设置整个画布的透明度：
ctx.globalAlpha = 0.5; // 设置透明度为50%
3. 线条样式
3.1 设置线条宽度
使用 lineWidth 属性设置线条宽度：
ctx.lineWidth = 5; // 设置线条宽度为5px
3.2 设置线条端点样式
使用 lineCap 属性设置线条端点样式，可选值有 'butt'、'round' 和 'square'：
ctx.lineCap = 'round'; // 设置线条端点为圆形
3.3 设置线条连接样式
使用 lineJoin 属性设置线条连接处的样式，可选值有 'bevel'、'round' 和 'miter'：
ctx.lineJoin = 'round'; // 设置线条连接处为圆角
3.4 设置虚线样式
使用 setLineDash 方法设置虚线样式，参数为数组 [实线长度, 空白长度]：
ctx.setLineDash([10, 5]); // 设置虚线样式为10px实线，5px空白
3.5 设置虚线偏移量
使用 lineDashOffset 属性设置虚线偏移量：
ctx.setLineDash([10, 5]);
ctx.lineDashOffset = 5; // 设置虚线偏移量为5px
4. 文本样式
4.1 设置字体
使用 font 属性设置字体样式，格式类似于 CSS 字体属性：
ctx.font = 'italic bold 20px Arial'; // 设置字体样式为斜体、加粗、20px的Arial字体
4.2 设置文本对齐方式
使用 textAlign 属性设置文本对齐方式，可选值有 'left'、'center' 和 'right'：
ctx.textAlign = 'center'; // 设置文本对齐方式为居中
4.3 设置文本基线
使用 textBaseline 属性设置文本基线，可选值有 'top'、'middle'、'bottom' 和 'alphabetic'：
ctx.textBaseline = 'middle'; // 设置文本基线为中间
5. 渐变与阴影
5.1 线性渐变
使用 createLinearGradient 方法创建线性渐变：
const gradient = ctx.createLinearGradient(0, 0, 200, 0); // 创建从左到右的线性渐变
gradient.addColorStop(0, 'red'); // 渐变起始颜色为红色
gradient.addColorStop(1, 'blue'); // 渐变结束颜色为蓝色
ctx.fillStyle = gradient; // 使用渐变作为填充颜色
5.2 径向渐变
使用 createRadialGradient 方法创建径向渐变：
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 属性设置阴影效果：
ctx.shadowOffsetX = 10; // 设置阴影水平偏移10px
ctx.shadowOffsetY = 10; // 设置阴影垂直偏移10px
ctx.shadowBlur = 5; // 设置阴影模糊半径5px
6. 裁剪与变换
6.1 裁剪区域
使用 clip 方法裁剪当前路径：
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 方法平移坐标系：
ctx.translate(50, 50); // 将坐标系原点平移到(50, 50)
6.3 缩放变换
使用 scale 方法缩放坐标系：
ctx.scale(2, 2); // 将坐标系缩放2倍
6.4 旋转变换
使用 rotate 方法旋转坐标系：
ctx.rotate(Math.PI / 4); // 将坐标系旋转45度（π/4弧度）
6.5 复合变换
可以组合使用 save 和 restore 方法保存和恢复变换状态：
ctx.save(); // 保存当前变换状态
ctx.translate(50, 50);
ctx.scale(2, 2);
ctx.restore(); // 恢复之前的变换状态
7. 图像处理
7.1 绘制图像
使用 drawImage 方法绘制图像：
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 图像裁剪
可以通过指定裁剪区域来裁剪图像：
ctx.drawImage(img, 0, 0, 100, 100, 0, 0, 200, 200); // 裁剪图像并放大显示
7.3 图像滤镜
虽然 <canvas> 不直接支持 CSS 滤镜，但可以通过 getImageData 和 putImageData 方法进行像素级操作来实现类似效果。例如，简单的灰度转换：
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; // Reddata[i + 1] = gray; // Greendata[i + 2] = gray; // Blue
}ctx.putImageData(imageData, 0, 0);
8. 其他功能
8.1 测量文本宽度
使用 measureText 方法测量文本宽度：
const metrics = ctx.measureText('Hello World');
console.log(metrics.width); // 输出文本的宽度
8.2 清除画布
使用 clearRect 方法清除画布：
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,