使用 <img> 和 <canvas> 绘制图像有什么区别？ [复制]

Question

我正在关注 w3schools 上的画布教程，我刚刚发现有一个用于绘制图像的画布功能。

这是我正在查看的示例：

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
};  

嗯......我一直使用<img> 标签在我的页面中显示图像我问自己这两种显示图像的方式有什么区别。

有什么想法吗？

Answer 1

通常，您不会使用画布来显示单个静态图像。

您可能会做的是拥有许多不同的图像文件，并在一个画布上进行构图。例如，如果你有“man”、“block”和“monster”的图像，并且你将它们渲染到画布上每秒 30 次，根据关键事件更新它们的相对位置，那么你基本上已经创建了游戏。

如果您只显示单个静态图像，那么与仅使用 <img> 标记没有什么不同，这可能是您应该做的，因为这样更清楚它是什么。

<canvas> 用于您想要使用 javascript 动态生成/操作的图形。