Javascript CANVAS 很棒：它允许我们在浏览器屏幕上绘制线条、多边形之类的东西。
我想知道 Javascript CANVAS 是如何工作的。例如画一条线，它是使用一系列对齐的小图像来模拟这条线还是其他方法？
提前致谢。
sc85
问问题
5894 次
6 回答
9
任何合理的实现者只会使用位图（内部存储在浏览器中），并使用 OS 本机绘图命令绘制到该位图。
为什么这有关系？如果您想知道的话，它与 HTML+CSS 完全无关。
更详细，为详细起见：
当浏览器的 HTML 解析器看到一个画布元素（具有给定的宽度和高度）时，它需要分配一个屏幕像素图来覆盖该区域。它要么手动执行此操作（即 malloc()），要么调用某些 OS 本机绘图 API 以创建要在其上绘图的表面。操作系统原生 API 可以是 Windows、Gtk、Kde、Qt 或浏览器实现者选择的任何其他绘图库。此外，它高度依赖于操作系统。Internet Explorer 可能会调用一些 Windows 本地库（即 DirectX 或 WinFooBarMethod()）。
一旦创建了绘图表面，JavaScript 解释器的内部就可以访问它，可能是通过指向所构建绘图表面的指针或句柄。然后，当 JS 解释器看到对其中一个画布方法的调用时，它会将其转换为对相应操作系统本机命令的调用。
因此，使用 Windows 3.1 风格的比喻：
"new canvas(width, height)" = "WinCreatePixmap(width, height)"
"canvas.setPixel(x,y,color)" = "WinSetPixel(x,y,color)"
并使用手动管理的像素图：
"new canvas(width, height)" = "malloc(width * height * sizeof(Pixel))"
"canvas.setPixel(x,y,color)" = "canvas[x][y] = color;"
同样，对于 JavaScript 开发人员来说，如何实现这些方法并不重要。唯一需要关心的是那些正在编写支持画布的 HTML5 兼容 Web 浏览器的人。
于 2009-04-18T03:55:54.020 回答
4
如果你知道 C++，你可以去源码。
例如，在 Firefox 中，“图形上下文”对象由类实现nsCanvasRenderingContext2D。但该类实际上并没有直接修改像素。相反，它要求一个名为 Thebes 的单独对象来执行此操作。Thebes 又将这项工作委托给名为Cairo的图形库，该库通常要求操作系统提供的库来执行实际的像素工作。我想到处都是类似的故事。
在最底部，画布有一个二维像素数组。每个像素都是一个 32 位整数。通过将值分配给数组的元素来设置像素。某处有一些代码可以确定要绘制哪些像素并将适当的值分配给适当的数组元素。
从理论上讲，像素可能是由您的显卡绘制的，但我听说显卡通常不能被信任来执行 2D 图形，因为硬件针对 3D 游戏进行了积极的调整，并且牺牲了太多的准确性来换取速度。
于 2009-12-15T18:35:32.253 回答
1
你想多了，很简单：
画布就像可以在浏览器上绘制的图像。
于 2009-07-20T20:19:52.247 回答
1
这肯定是特定于JavaScript 引擎浏览器的实现吗？
于 2009-04-18T03:44:39.040 回答
1
如果您对线条绘制的工作原理感兴趣，请查看Bresenham 的线条绘制算法。
于 2009-04-18T04:11:32.203 回答
0
我认为执行很重要。为什么这有关系？看闪光。当您使用绘图 API 创建复杂的分形图稿时，它实际上是在创建矢量图稿并使每条线和曲线成为所绘制对象的子图，因此它每帧都会重新渲染矢量图图。崩溃！或突突……突突……突突……所以对于复杂的分形或记录方程式的艺术，我必须使用位图或渲染引擎 CACKS . 它确实有所作为，因为现在我正在尝试将我的一些 Flash 多媒体传输到 Javascript 并遇到浏览器之间的差异。
于 2009-12-15T18:18:25.833 回答