HTML5 Canvas 是在前端开发中广泛使用的功能强大的绘图技术。它允许您创建各种可视化效果，包括添加图像。在本文中，我们将深入探讨如何在 Canvas 中向画布添加图像。
准备工作
在开始添加图像之前，您需要有一张图片，并将其上传到可访问的服务器上。您还需要一个可以访问 Canvas 元素的 JavaScript 上下文。
<canvas id="my-canvas"></canvas>
<script>
let canvas = document.getElementById('my-canvas');
let ctx = canvas.getContext('2d');
</script>使用 Image 对象
要将图像添加到 Canvas 中，我们需要使用 Image 对象。Image 对象有一个 onload 事件，当图像完全加载时触发。因此，我们需要等待图像加载完成才能将其添加到 Canvas 中。
-- -------------------- ---- -------
------- ------------------------
--------
--- ------ - -------------------------------------
--- --- - ------------------------
--- --- - --- --------
---------- - ---------- -
------------------ -- ---
-
------- - --------------------
---------在上面的示例中，我们创建了一个 Image 对象，并为其指定了一个 onload 事件处理程序。当图像加载完成后，我们将其添加到 Canvas 的左上角。
调整图像大小
在某些情况下，您可能需要调整图像的大小以适合 Canvas。您可以使用 drawImage() 方法的前四个参数来指定要绘制的部分和目标位置和尺寸。
-- -------------------- ---- -------
------- ------------------------
--------
--- ------ - -------------------------------------
--- --- - ------------------------
--- --- - --- --------
---------- - ---------- -
--- ----- - --
--- ----- - --
--- --------- - -------------
--- ---------- - --------------
------------------ ------ ------ ---------- ------------
-
------- - --------------------
---------在上面的示例中，我们将图像的宽度和高度设置为与 Canvas 相同，并将其绘制在 Canvas 的左上角。
总结
在本文中，我们介绍了如何向 Canvas 中添加图像。首先，我们需要创建一个 Image 对象并等待其加载完成。然后，我们可以使用 drawImage() 方法将图像添加到 Canvas 中。如果需要，您还可以调整图像的大小以适应 Canvas。
示例代码
-- -------------------- ---- -------
------- ------------------------
--------
--- ------ - -------------------------------------
--- --- - ------------------------
--- --- - --- --------
---------- - ---------- -
--- ----- - --
--- ----- - --
--- --------- - -------------
--- ---------- - --------------
------------------ ------ ------ ---------- ------------
-
------- - --------------------
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12121
