2017-05-16 1 views
0

HTMLキャンバスでは、より大きな図形が実際にはもっと時間がかかることが理解できます。したがって、100×100の正方形と1000×1000の正方形を描くと、100×100の方が高速になることが期待できます。部分的に画面を超えて描画するときのHTMLキャンバスのパフォーマンス

これは、より大きく、部分的に画面外の図形にも適用されますか?

は、ここで私が何を意味するかの例です:

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

を今、私は(0250)で、幅1000000の四角形を描画した場合、それは水平にキャンバス全体渡って伸びるでしょう。しかし、幅250の矩形を(250,250)に描画すると、キャンバスの幅全体にまたがるので、エンドユーザーにも同じように見えます。

ユーザーに表示される実際の部分が同じであるため、これらの2つの矩形は同じ速度でレンダリングされますか?実際には見えないにもかかわらず余分な幅があっても、パフォーマンスに実際に影響しますか?

+0

がベンチマークを実行してご覧ください。次に、フィドルを共有し、ここで結果を得ます。 –

+0

正直言って私はちょうど怠け者で、他の誰かがすでにハハを知っていることを期待していましたが、おそらく私はそれを行い、ここで結果を投稿します:) – misaka

答えて

0

これは完全に完全な答えではありませんが、私はいくつかの実験を行い、私の結果は私の結果を説明することが明らかなものは何も見えませんでした。これらの結果は奇妙なことを考える

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/

は、私は非常にこの上の任意の入力をお願い申し上げます。..

関連する問題