Question

我的理解是，使用HTML画布，更大的形状实际上需要更多时间。因此，如果您绘制100x100平方与1000x1000平方，则可以预期100x100更快。

这是否适用于较大但部分偏离屏幕的形状？

这是我的意思的一个例子：

a 500x500 canvas
0,0 --------
|          |
|-------500,500

现在，如果我在（0,250）绘制一个宽度为1000000的矩形，它将横向拉伸整个画布。但是如果我在（250,250）处绘制宽度为500的矩形，它对最终用户来说看起来是一样的，因为它也会延伸到整个画布宽度。

这两个矩形是否以相同的速度渲染，因为用户可见的实际部分是相同的？或者额外的宽度，即使它实际上不可见，实际上会影响性能吗？

Answer 1

所以这不完全是一个完整的答案，但我做了一些实验，我的结果只让我更加困惑，虽然我没有看到任何明显可以解释我的结果。

587.2700000000001ms elapsed - test for size 500
108.55999999999995ms elapsed - test for size 50
237.32500000000005ms elapsed - test for size 250
476.45500000000015ms elapsed - test for size 500
500.65499999999975ms elapsed - test for size 1000
478.5500000000002ms elapsed - test for size 2000
58.24000000000024ms elapsed - test for size 5000
58.460000000000036ms elapsed - test for size 10000
60.82999999999993ms elapsed - test for size 25000

认为这些结果很奇怪，我尝试了另一组输入甚至更奇怪的结果

72.76499999999987ms elapsed - test for size 500000
61.690000000000055ms elapsed - test for size 10000
58.47499999999991ms elapsed - test for size 5000
620.9050000000002ms elapsed - test for size 1000
475.0450000000001ms elapsed - test for size 500
379.0250000000001ms elapsed - test for size 400
281.7850000000003ms elapsed - test for size 300
186.54500000000007ms elapsed - test for size 200
120.51500000000033ms elapsed - test for size 100
59.210000000000036ms elapsed - test for size 50000
58.220000000000255ms elapsed - test for size 500000

这些测试是在Firefox中进行的，即使对于非常快的尺寸，结果似乎也能正确呈现。

这是小提琴：https://jsfiddle.net/vrn7xrrj/1/

我非常感谢有关此的任何意见..

部分超出屏幕绘制时的HTML画布性能

1 个答案: