Question

Javascript CANVAS非常棒：它允许我们在浏览器屏幕上绘制线条，多边形等内容。

我想知道Javascript CANVAS是如何工作的。例如，为了画一条线，它是否使用一系列对齐的微小图像来模拟线条或其他一些方法？

提前致谢。

Answer 1

任何合理的实现者都会使用位图（在浏览器内部存储），并使用OS本机绘图命令绘制它。

为什么重要？它与HTML + CSS完全无关，如果这就是你想知道的。

更多细节，为了细节：

当浏览器的HTML解析器看到画布元素（给定宽度和高度）时，需要分配一个屏幕上的像素图来覆盖该区域。它要么手动执行（即malloc（）），要么调用某些OS本机绘图API来创建要绘制的表面。 OS本机API可以是Windows，Gtk，Kde，Qt或浏览器实施者选择的任何其他绘图库。此外，它高度依赖于操作系统。 Internet Explorer可能调用了一些Windows本机库（即DirectX或WinFooBarMethod（））。

创建绘图表面后，可以通过JavaScript解释器的内部内容访问它，可能通过构造绘图表面的指针或手柄。然后，当JS解释器看到一个canvas方法的调用时，它会将其转换为对相应的OS本机命令的调用。

所以，使用Windows 3.1风格的比喻：

"new canvas(width, height)" = "WinCreatePixmap(width, height)" 
"canvas.setPixel(x,y,color)" = "WinSetPixel(x,y,color)"

使用手动管理的pixmap：

"new canvas(width, height)" = "malloc(width * height * sizeof(Pixel))"
"canvas.setPixel(x,y,color)" = "canvas[x][y] = color;"

同样，JavaScript开发人员如何实现这些方法也无关紧要。唯一需要关心的人是那些使用画布支持编写符合HTML5标准的Web浏览器的人。

Answer 2

如果您了解C ++，则可以访问源代码。

例如，在Firefox中，“图形上下文”对象由类nsCanvasRenderingContext2D实现。但该类实际上并没有直接修改像素。相反，它要求一个名为Thebes的单独对象来做到这一点。然后，Thebes将此工作委托给名为Cairo的图形库，该库通常要求操作系统提供的库来执行实际的像素工作。我想这到处都是类似的故事。

在最底部，画布具有二维像素阵列。每个像素是32位整数。通过为数组的元素赋值来设置像素。某处有一些代码可以确定要绘制哪些像素，并将适当的值分配给相应的数组元素。

从理论上讲，像素可能是由您的视频卡绘制的，但我听说显卡通常无法信任制作2D图形，因为硬件正在积极调整以进行3D游戏并且交易过多的准确性速度。

Answer 3

当然这是针对 ~~JavaScript引擎~~浏览器的特定于实现的？

Answer 4

你想的太多了，很简单：

画布就像可以在浏览器上绘制的图像。

Answer 5

如果您对线条图的工作方式感兴趣，请查看Bresenham's Line Drawing Algorithm。

Answer 6

我认为实施很重要。为什么这有关系？看看闪光灯。当您使用绘图API创建复杂的分形艺术作品时，它实际上是创建矢量图稿并使每条线和曲线成为正在绘制的对象的子项，因此它会每帧重新渲染矢量图稿。崩溃！或突突......突突........突然.............. 因此，对于复杂的分形或记录方程的艺术，我必须使用位图或渲染引擎CACKS。它有所作为，因为现在我正试图将我的一些flash多媒体转移到Javascript并遇到浏览器之间的差异。

Javascript CANVAS如何运作？

6 个答案: