html5画布图片

Canvas基础介绍

HTML5 <canvas> 元素用于在网页中绘制图形，支持动态渲染图像、动画及复杂图形操作，通过 JavaScript 获取 2D 上下文 (CanvasRenderingContext2D) 后,可调用其方法进行绘图。

核心属性与方法
| 属性/方法 | 说明 |
|———|—-|
| fillRect(x, y, width, height) | 填充矩形 |
| strokeRect(x, y, width, height) | 描边矩形 |
| clearRect(x, y, width, height) | 清除矩形区域 |
| drawImage(image, x, y) | 绘制图像 |
| getImageData(x, y, width, height) | 获取像素数据 |
| putImageData(imageData, x, y) | 放置像素数据 |

加载与绘制图片

加载图片资源

需通过 Image 对象加载图片，并监听 onload 事件确保图片加载完成后再绘制：

const img = new Image();
img.src = 'image.jpg';
img.onload = () => {
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0); // 绘制到画布
};

绘制图片的三种方式

像素级操作

获取与修改像素数据

通过 getImageData 获取图像像素数组,可直接修改颜色或透明度：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // 一维数组 [R,G,B,A,...]
for (let i = 0; i < data.length; i += 4) {
  data[i] = data[i+1] = data[i+2] = 255; // 转为灰度图
}
ctx.putImageData(imageData, 0, 0);

像素数据结构

每4个值代表一个像素的 RGBA（红、绿、蓝、透明度），范围为 0-255。

高级图像处理

缩放与旋转

// 缩放
ctx.scale(0.5, 0.5); // 宽度和高度均缩小为50%
ctx.drawImage(img, 0, 0);
// 旋转（以画布中心为锚点）
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(Math.PI/4); // 旋转45度
ctx.drawImage(img, -img.width/2, -img.height/2);

图像合成

设置 globalCompositeOperation 实现混合模式：
| 属性值 | 效果 |
|——|—-|
| source-over | 默认，新图像覆盖旧图像 |
| destination-over | 旧图像覆盖新图像 |
| lighter | 保留较亮像素 |
| multiply | 正片叠底（颜色相乘） |

相关问题与解答

问题1：为什么 drawImage 有时无法显示图片？

解答：
可能原因：

1. 图片未加载完成，需在 img.onload 回调中执行绘制。
2. 跨域问题，若图片来自不同域名，需服务器允许跨域访问（设置 Access-Control-Allow-Origin）。
3. 画布尺寸过小,导致图像超出可见区域。

问题2：如何优化大量像素操作的性能？

解答：
优化方法：

1. 仅操作必要区域的像素（如 getImageData(x, y, width, height)）。
2. 使用 TypedArray（如 Uint8ClampedArray）直接操作底层数据。
3. 合并多次 putImageData