画布元素 - 2D 绘图 - 绘制图像到画布

在前端开发中，HTML5 的 <canvas> 元素为我们提供了强大的绘图能力。其中，将图像绘制到画布上是一个非常实用的功能，比如实现图像裁剪、滤镜效果、图像拼接等。本文将详细介绍如何使用 <canvas> 元素的 2D 绘图 API 把图像绘制到画布上。

1. 基本概念

<canvas> 是 HTML5 新增的元素，用于在网页上绘制图形。要使用 <canvas> 进行 2D 绘图，需要先获取其 2D 上下文对象，然后使用该对象提供的方法进行绘图操作。

获取 2D 上下文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Drawing</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('myCanvas');
        // 获取 2D 上下文
        const ctx = canvas.getContext('2d');
    </script>
</body>
</html>

在上述代码中，首先通过 document.getElementById 方法获取 <canvas> 元素，然后使用 getContext('2d') 方法获取 2D 上下文对象 ctx，后续的绘图操作都将基于这个上下文对象进行。

2. 绘制图像到画布

要将图像绘制到画布上，需要使用 drawImage 方法。drawImage 方法有三种不同的调用方式。

2.1 基本绘制

drawImage(image, x, y)：将图像的左上角绘制到画布的指定坐标 (x, y) 处。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Drawing - Basic</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 创建 Image 对象
        const img = new Image();
        // 设置图像源
        img.src = 'example.jpg';
        // 图像加载完成后绘制到画布
        img.onload = function () {
            ctx.drawImage(img, 100, 100);
        };
    </script>
</body>
</html>

在这个例子中，首先创建了一个 Image 对象，设置其 src 属性为要绘制的图像的路径。然后，通过 onload 事件监听图像加载完成，当图像加载完成后，使用 drawImage 方法将图像绘制到画布的 (100, 100) 坐标处。

2.2 绘制指定大小的图像

drawImage(image, x, y, width, height)：将图像的左上角绘制到画布的指定坐标 (x, y) 处，并指定图像在画布上的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Drawing - Resized</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'example.jpg';
        img.onload = function () {
            ctx.drawImage(img, 100, 100, 200, 150);
        };
    </script>
</body>
</html>

在这个例子中，drawImage 方法的后两个参数 200 和 150 分别指定了图像在画布上的宽度和高度，这样可以对图像进行缩放。

2.3 裁剪并绘制图像

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：从图像的指定区域 (sx, sy, sWidth, sHeight) 裁剪出一部分，然后将其绘制到画布的指定区域 (dx, dy, dWidth, dHeight) 处。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Drawing - Cropped</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'example.jpg';
        img.onload = function () {
            // 从图像的 (100, 100) 位置开始裁剪，裁剪宽度为 200，高度为 150
            // 然后将裁剪后的图像绘制到画布的 (300, 300) 位置，绘制宽度为 100，高度为 75
            ctx.drawImage(img, 100, 100, 200, 150, 300, 300, 100, 75);
        };
    </script>
</body>
</html>

在这个例子中，通过指定 sx、sy、sWidth 和 sHeight 参数，从图像中裁剪出一部分，然后通过 dx、dy、dWidth 和 dHeight 参数将裁剪后的图像绘制到画布的指定位置，并可以对其进行缩放。

3. `drawImage` 方法总结

方法签名	描述
`drawImage(image, x, y)`	将图像的左上角绘制到画布的指定坐标 `(x, y)` 处
`drawImage(image, x, y, width, height)`	将图像的左上角绘制到画布的指定坐标 `(x, y)` 处，并指定图像在画布上的宽度和高度
`drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`	从图像的指定区域 `(sx, sy, sWidth, sHeight)` 裁剪出一部分，然后将其绘制到画布的指定区域 `(dx, dy, dWidth, dHeight)` 处

4. 注意事项

图像加载问题：由于图像是异步加载的，所以必须在 onload 事件中进行绘制操作，确保图像已经完全加载。
跨域问题：如果图像的源与当前页面的源不同，可能会遇到跨域问题。要解决这个问题，需要在服务器端设置合适的 CORS（跨域资源共享）头。

通过以上介绍，相信你已经掌握了如何使用 HTML5 的 <canvas> 元素将图像绘制到画布上。利用 drawImage 方法的不同调用方式，可以实现各种复杂的图像绘制效果。

画布元素 - 2D 绘图 - 绘制图像到画布