Javascript CANVAS如何运作？

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浏览器的人.