Javascript画布和内部函数的优化？
假设我有一个100 x 100的矩形，我有一个1000 x 1000的画布 只要矩形的x坐标不大于999且不小于-100，就可以说矩形的某些部分将在画布上清晰可见。矩形的y坐标也是如此Javascript画布和内部函数的优化？,javascript,api,canvas,Javascript,Api,Canvas,假设我有一个100 x 100的矩形，我有一个1000 x 1000的画布 只要矩形的x坐标不大于999且不小于-100，就可以说矩形的某些部分将在画布上清晰可见。矩形的y坐标也是如此 我想知道的是，如果矩形的x或y坐标被设置为使矩形在画布上不可见，那么画布api的内部工作是否仍然绘制矩形，或者它是否自动优化并自行意识到将在画布上绘制的位图不会被看到，因此，它不会试图绘制它。FWIW，在IE、Chrome和FF上，完全屏幕外绘制（非绘制？）比屏幕上绘制100000个矩形少了大约100毫秒 根据：
我想知道的是，如果矩形的x或y坐标被设置为使矩形在画布上不可见，那么画布api的内部工作是否仍然绘制矩形，或者它是否自动优化并自行意识到将在画布上绘制的位图不会被看到，因此，它不会试图绘制它。FWIW，在IE、Chrome和FF上，完全屏幕外绘制（非绘制？）比屏幕上绘制100000个矩形少了大约100毫秒 根据： 当目标矩形位于目标图像（暂存位图）之外时，位于暂存位图之外的像素将被丢弃，就像目标是一个无限画布，其渲染被剪裁到暂存位图的尺寸一样
这并不是绝对针对您的问题，但很可能所有“画布外视图”操作都是以这种方式处理的。因此，基于此，我想说是的，它们是“优化的”当绘制到画布时，每次绘制都会检查边界。如果一个像素结束于画布之外，它将被剪裁（丢弃） 如果不是这样的话，你会得到一个内存损坏，很快就会崩溃 Canvas的设计是非常安全的，这样您就不会有编写糟糕的Java脚本（有意或无意）破坏您的浏览器。这同样适用于颜色值（例如，直接使用位图数组）被钳制在有效范围内的颜色 优化取决于实现，但可以合理地假设，如果区域完全超出画布边界，则完全拒绝绘制操作。如果部分位于内部，则可以通过移动“开始”和“结束”光标来启动内部块副本，以表示将呈现为可见的有效区域 另一个选项是在渲染时检查每个像素（如果它位于可见边界的内部或外部）。然而，这并不是最优的 为了可视化，只考虑灰色区域，而忽略浅蓝色区域： （我没有展示所有的可能性，但应该很容易想象底部部分等） 这里的光标是内部例程开始和停止像素循环的位置。在这种情况下，如果要绘制的区域为100x100像素，并且以-50，-50（x，y）绘制，则内部光标相对于要绘制的区域设置为+50、+50，并且宽度和高度同样减小 通过移动光标并调整宽度和高度，它不必遍历所有像素，从而优化副本（尽管说“所有像素”并不十分准确），因为数据不是按像素复制的，而是主要基于与内存对齐相关的块。有单独的算法处理优化内存复制，并考虑偏移字节（不在“干净”内存边界上开始或结束的字节）以此类推，也就是说，4或8个字节是一次性复制的，而不是一个字节加一个字节加上屏蔽（和“隐藏位”） 边界也适用于直线和圆等。它们的有效绘图区域被处理为正方形区域，但是有不同的方法来绘制线、圆和正方形像素，以进一步优化 见f.ex。对于直线、圆或椭圆，我不知道每个浏览器中的具体实现，但对于这些浏览器，您需要计算起点坐标和终点坐标的平方，在某些情况下（如圆和椭圆），您可能需要边走边检查（可能将圆分为四个部分，并检查每个像素上重叠边界的部分-尽管这是特定于实现的） 当涉及到平移时，这仅仅是坐标的重新计算（平移、旋转等等），然后根据边界检查新坐标
话虽如此，现在还不确定浏览器是否有自己的具体实现。如果可能的话，他们可能会使用系统的本地位图和剪辑功能。但是，上述同样的情况也适用于这种情况。我想这取决于浏览器实现是否有一个没有可见结果的函数调用会触发重画。你的目标是什么特别的东西吗？为什么你会问，你有问题吗？快速浏览一下代码怎么样，看起来它使用WebGL，剪辑也是如此？@Orbling使用
实验性WebGL2dcontext2dcontext2dcontext