Javascript Canvas 和内部功能的优化？

Question

假设我有一个 100 x 100 的矩形，我有一个 1000 x 1000 的 Canvas 。

只要矩形的 x 坐标不大于 999 且不小于 -100，就可以在 Canvas 上看到矩形的某些部分。矩形的 y 坐标也是如此。

我想知道的是，如果矩形的 x 或 y 坐标被设置为矩形在 Canvas 上不可见， Canvas api 的内部工作机制是否仍然绘制矩形或自动绘制矩形自己优化并意识到将在 Canvas 上绘制的位图将不会被看到，因此它不会尝试绘制它。

Answer 1

绘制到 Canvas 时，每次绘制都会检查边界。如果一个像素最终出现在 Canvas 之外，它将被剪裁(丢弃)。

否则你会遇到内存损坏并很快崩溃。

Canvas 的设计非常安全，因此您不会因编写不当的 Javascript(有意或无意)而导致浏览器崩溃。这同样适用于颜色值(例如直接使用位图数组)被限制在有效范围内的颜色。

优化取决于实现，但可以合理地假设，如果该区域完全位于 Canvas 边界之外，则绘制操作将被完全拒绝。如果它部分位于内部，它可以通过移动开始和结束光标来表示将呈现为可见的有效区域来开始内部 block 复制。

另一种选择是在渲染时检查每个像素，看它是在可见边界之内还是之外。然而，这并不是最佳的。

为了形象化，只考虑灰色区域，忽略浅蓝色区域:

(我没有展示所有的可能性，但应该很容易想象底部等)

此处的光标是内部例程开始和停止循环遍历像素的地方。在这种情况下，如果要绘制的区域为 100x100 像素并在 -50、-50 (x,y) 处绘制，则内部光标设置为 +50、+50 相对于正在绘制的区域，宽度和高度为同样减少。

通过移动光标并调整宽度和高度，它不必遍历所有像素并因此优化复制(尽管说“所有像素”并不十分准确，因为数据未被复制每个像素但主要基于与内存对齐相关的 block 。有单独的算法处理优化内存复制并考虑偏移字节(不在“干净”内存边界上开始或结束的字节)等等，即。一次复制 4 或 8 个字节，而不是一个字节和一个字节结合屏蔽(AND'ing 位))。

边界也适用于直线和圆等。它们的有效绘图区域被处理为正方形区域，但是有不同的方法来绘制线、圆而不是正方形像素，以进一步优化。

参见 f.ex. Bresenham algorithm对于行或 mid-point circle algorithm对于圆圈或 various algorithms对于椭圆 - 我不知道每个浏览器中的具体实现，但对于这些你开始和结束坐标的平方，在某些情况下(如圆和椭圆)你可能需要边走边检查(也许画圆四个部分并逐个检查与边界重叠的部分 - 虽然这是特定于实现的)。

当谈到平移时，它只是重新计算坐标(平移、使用 rotation matrixes 旋转以及类似的东西)。然后根据边界检查新坐标。

话虽这么说，但不确定浏览器是否有自己的特定实现。他们可能会尽可能使用系统的 native 位图和裁剪功能。然而，上述同样适用于这种情况。