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动态生成/处理的图形。

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

1 个答案: