54、网页图形与音频API全解析

网页图形与音频API全解析

1. 画布图像操作

在网页开发中，画布（canvas）是一个强大的工具，可用于绘制和处理图像。其中， drawImage() 方法有不同的使用方式。当使用特定版本时，源图像会被缩放以适应目标矩形。而九参数版本的 drawImage() 则能同时指定源矩形和目标矩形，仅复制源矩形内的像素。以下是具体参数说明：
| 参数范围 | 说明 | 坐标系 |
| ---- | ---- | ---- |
| 第二个到第五个参数 | 指定源矩形，以CSS像素为单位。若源图像是另一个画布，源矩形使用该画布的默认坐标系，忽略指定的变换。 | 源图像坐标系 |
| 第六个到第九个参数 | 指定绘制图像的目标矩形，使用画布的当前坐标系，而非默认坐标系。 | 画布当前坐标系 |

此外，还可以使用 toDataURL() 方法将画布内容提取为图像。该方法是 Canvas 元素本身的方法，而非上下文对象的方法。通常无参数调用，它会将画布内容以PNG图像形式返回，编码为 data: URL 字符串，可用于 <img> 元素。示例代码如下：

let img = document.createElement("img");  // 创建一个 <img> 元素
img.src = canvas.toDataURL();             // 设置其 src 属性
docu