javascript - context.drawImage 是如何工作的

Question

在 HTML5 中，使用画布对象可以绘制图像。

context.drawImage(imageObj, x, y);

这在引擎盖下是如何工作的？浏览器是绘制像素还是使用 svg？我没有看到任何 svg 元素被添加到 dom 中，所以我假设浏览器正在绘制像素，但它是如何完成这一切的呢？是否有浏览器正在使用的库？

为了便于讨论，我想我们可以只考虑 Webkit，但我也会对其他浏览器 (IE) 的功能感兴趣。

score 1 · Accepted Answer

嗯……你问了！

把画布想象成一个大的、活生生的位图……下面是细节：

score 1 · Accepted Answer

Canvas是基于像素的界面，SVG是矢量图形的标记语言，它们是两个非常独立的东西。

如果您将图像添加到画布，它首先将其加载到 dom 中，然后将其渲染到画布。

不过，您可以将 SVG 与 Canvas 结合使用。假设您希望您的画布应用程序可以缩放，您可以简单地将不同大小的 svg 文件重新渲染到画布上，如此处所述

因为 SVG 图形可以像图像一样使用，所以它们可以像图像一样渲染到画布上。

如果您想更深入地了解画布，只需阅读规范

2 回答 2