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

网页图形与音频技术全解析

1. 画布绘图基础

在网页开发中， <canvas> 元素为我们提供了强大的绘图能力。当使用 drawImage() 方法复制图像时，源图像会被缩放以适应目标矩形。九参数版本的 drawImage() 方法可以同时指定源矩形和目标矩形，仅复制源矩形内的像素。其中，第二到第五个参数指定源矩形，以 CSS 像素为单位；第六到第九个参数指定目标矩形，使用画布的当前坐标系。

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

let img = document.createElement("img");  // 创建一个 <img> 元素
img.src = canvas.toDataURL();             // 设置其 src 属性
document.body.appendChild(img);           // 将其添加到文档中

2. 坐标系变换

画布的默认坐标系原点位于左上角，x 坐标向右递增，y 坐标向下递增。在这个默认系统中，点的坐标直接映射到 CSS 像素。不过，每个画布都有一个“当前变换矩阵”，它定义了画布的