HTML5 Canvas のパフォーマンスを最適化するためのキャッシュの使用に関する簡単な説明

キャンバスをいじりすぎると、自動的にパフォーマンスの問題を考慮し始めるようになります。キャンバスアニメーションを最適化するにはどうすればよいですか?

【キャッシュを使用する】

キャッシュを使用するということは、事前レンダリングにオフスクリーン キャンバスを使用することを意味します。原理は非常に簡単です。つまり、最初にオフスクリーン キャンバスに描画し、次に、drawImage を通じてオフスクリーン キャンバスをメイン キャンバスに描画します。誤解している人も多いかもしれませんが、これはゲームでよく使われるダブルバッファリングの仕組みではないでしょうか。

実際、ゲームプログラミングでは画面のちらつきを防ぐためにダブルバッファリングメカニズムが使用されているため、描画時には、最初に画面のコンテンツが描画されます。背景キャンバスが描画され、キャンバス内のデータが前面キャンバスに描画されます。これはダブル バッファリングですが、最新のブラウザには基本的にダブル バッファリング メカニズムが組み込まれているため、キャンバスにはダブル バッファリングはありません。したがって、オフスクリーン キャンバスの使用はダブル バッファリングではなく、オフスクリーン キャンバスをキャッシュ領域として扱います。繰り返し描画する必要がある画面データをキャッシュして、キャンバス API の呼び出しの消費を削減します。

ご存知のとおり、キャンバス API の呼び出しはパフォーマンスを消費します。そのため、繰り返し画面データを描画する場合は、オフスクリーン キャンバスを適切に使用するとパフォーマンスが大幅に向上します。

1. キャッシュは使用されません

2. キャッシュは使用されますが、オフスクリーンキャンバスの幅と高さが設定されていません

3. キャッシュは使用されますが、オフスクリーン キャンバスの幅と高さは設定されていません

4. キャッシュを使用し、オフスクリーン キャンバスの幅と高さを設定します

上記のデモのパフォーマンスが異なることがわかります。以下の理由を分析してみましょう。 キャッシュが有効になっていない場合、各円のスタイルを実現するために、ループ描画を使用しました。ページ上の円がある一定のレベルになると、アニメーションの各フレームごとに大量の Canvas API 呼び出しが必要になり、大量の計算が必要になるため、どんなに優れたブラウザーを使用しても、下。
XML/HTML コードコンテンツをクリップボードにコピー

1. ctx.save();   
2. var j=0;   
3. ctx.lineWidth = borderWidth;   
4. for(var i=1;ithis.r;i =borderWidth){
5. ctx.beginPath();   
6. ctx.ストロークスタイル = this.color[j];   
7. ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
8. ctx.ストローク();   
9. j ;   
10. }
11. ctx.restore();  

したがって、私たちの方法は非常に単純で、各フレームのオブジェクトの領域が別の 1 つのスクリーンキャンバスとして機能します。

スクリーンキャンバスを保存として作成した場合を除き、次のコード内に一点很关键があり、スクリーンキャンバスのサイズと高さを設定する必要があり、キャンバス生成後のサイズは300X150です。来来のオブジェクトの半径が最大でも 80 を超えないため、300X150 のサイズでは空き領域が多くなり、リソースの浪費が生じるため、スクリーン キャンバスのサイズと高さを下に配置する必要があり、保存されている要素のサイズが一致しますこれは、アニメーション パフォーマンスの向上にも役立ちます。上の 4 つのデモでは、パフォーマンスの差が示されています。 1000 個の仮想オブジェクトもトークンを取得できません。

XML/HTML コード复制コンテンツ到剪贴板

1. var ball = function(x , y , vx , vy , useCache){
2. this.x = x;   
3. this.y = y;   
4. this.vx = vx;   
5. this.vy = vy;   
6. this.r = getZ(getRandom(20,40));   
7. this.color = [];   
8. this.cacheCanvas = document.createElement("canvas");   
9. thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
10. this.cacheCanvas.width = 2*this.r;   
11. this.cacheCanvas.height = 2*this.r;   
12. var num = getZ(this.r/borderWidth);   
13. for(var j=0;jnum;j ){
14. this.color.push("rgba(" getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) ",1)");   
15. }
16. this.useCache = useCache;   
17. if(useCache){
18. this.cache();   
19. }
20. }

円オブジェクトをインスタンス化するとき、キャッシュ メソッドを直接呼び出し、複雑な円を円オブジェクトのオフスクリーン キャンバスに直接描画して保存します。

XML/HTML コードコンテンツをクリップボードにコピー

1. cache:function(){
2. this.cacheCtx.save();
3. var j=0;
4. this.cacheCtx.lineWidth = borderWidth; for(var
i
5. =1;ithis.r;i =borderWidth){ this.cacheCtx.beginPath();
this
7. this.cacheCtx.ストロークスタイル = this.color[j]; this.cacheCtx.arc(this.r, this.r, i, 0, 2*Math.PI);
this.cacheCtx.ストローク();
j
10. this.cacheCtx.restore();
12. 次のアニメーションでは、円オブジェクトのオフスクリーン キャンバスをメイン キャンバスに描画するだけで済みます。このように、各フレームで呼び出される CanvasAPI には次の文のみが含まれます。
13. XML/HTML コードコンテンツをクリップボードにコピー

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);

以前の for ループ描画と比較すると、非常に高速です。そのため、ベクター グラフィックスを繰り返し描画したり、複数の画像を描画したりする必要がある場合、オフスクリーン キャンバスを合理的に使用して画像データを事前にキャッシュすることができ、後続の各フレームでの不必要なパフォーマンスの消費を大幅に削減できます。

1. 1000 個の円オブジェクトのスムーズ バージョン コードは以下に掲載されています:
XML/HTML コード

コンテンツをクリップボードにコピー

1. /span>>
2. html lang="en" >
3. 頭>
4. メタ charset="UTF- 8">
5. スタイル>
6. body{
7. パディング:0;   
8. マージン:0;   
9. オーバーフロー: 非表示。   
10. }
11. #cas{
12. 表示: ブロック;   
13. 背景色:rgba(0,0,0,0);   
14. マージン:自動;   
15. border:1px solid;   
16. }
17. スタイル>
18. タイトル>テストタイトル>
19. 頭>
20. ボディ>
21. div >
22. キャンバス id='cas' 幅="800" 高さ="600">ブラウザはキャンバスキャンバスをサポートしていません>
23. div style="text- align:center">1000 個の円オブジェクトはスタックしませんdiv>>
24. div>
26. スクリプト>
27. var testBox = function(){
28. var キャンバス = ドキュメント.getElementById("cas"),
29. ctx = canvas.getContext('2d'),
30. borderWidth = 2,
31. ボール = [];
var
32. ball = function(x, y, vx, vy, useCache){
33. this.x = x;
this.y
34. = y; this.vx
=
36. this.vy = vy;   
37. this.r = getZ(getRandom(20,40));   
38. this.color = [];   
39. this.cacheCanvas = document.createElement("canvas");   
40. thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
41. this.cacheCanvas.width = 2*this.r;   
42. this.cacheCanvas.height = 2*this.r;   
43. var num = getZ(this.r/borderWidth);   
44. for(var j=0;jnum;j ){
45. this.color.push("rgba(" getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) ",1)");   
46. }
47. this.useCache = useCache;   
48. if(useCache){
49. this.cache();   
50. }
51. }  
53. function getZ(num){
54. var 四捨五入。   
55. 四捨五入 = (0.5 num) | 0;   
56. // double ビット単位ではありません。   
57. 四捨五入 = ~~ (0.5 num);   
58. // 最後に、左 ビット単位のシフトです。   
59. 四捨五入 = (0.5 num) 0;   
61. 四捨五入して返します。   
62. }  
64. ball.prototype = {
65. paint:function(ctx){
66. if(!this.useCache){
67. ctx.save();   
68. var j=0;   
69. ctx.lineWidth = borderWidth;   
70. for(var i=1;ithis.r;i =borderWidth){
71. ctx.beginPath();   
72. ctx.ストロークスタイル = this.color[j];   
73. ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
74. ctx.ストローク();   
75. j ;   
76. }
77. ctx.restore();   
78. } else{
79. ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);   
80. }
81. },
83. cache:function(){
84. this.cacheCtx.save();   
85. var j=0;   
86. this.cacheCtx.lineWidth = borderWidth;   
87. for(var i=1;ithis.r;i =borderWidth){
88. this.cacheCtx.beginPath();   
89. thisthis.cacheCtx.ストロークスタイル = this.color[j];   
90. this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
91. this.cacheCtx.ストローク();   
92. j ;   
93. }
94. this.cacheCtx.restore();   
95. }、
97. move:function(){
98. this.x = this.vx;   
99. this.y = this.vy;   
100. if(this.x>(canvas.width-this.r)||this.x this.r){
101. thisthis.x=this.xthis.r?this.r:(canvas.width-this.r);   
102. this.vx = -this.vx;   
103. }  
104. if(this.y>(canvas.height-this.r)||this.y this.r){
105. thisthis.y=this.ythis.r?this.r:(canvas.height-this.r);   
106. this.vy = -this.vy;   
107. }
109. this.paint(ctx);   
110. }
111. }
113. var ゲーム = {
114. init:function(){
115. for(var i=0;i1000;i ){
116. var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas) .height) , getRandom(-10 , 10) , getRandom(-10 , 10) , true)
117. Balls.push(b);   
118. }
119. }、
121. update:function(){
122. ctx.clearRect(0,0,canvas.width,canvas.height);   
123. for(var i=0;iBalls.length;i ){
124. Balls[i].move();   
125. }
126. },
128. loop:function(){
129. var _this = this;   
130. this.update();   
131. RAF(function(){
132. _this.loop();   
133. })
134. }、
136. start:function(){
137. this.init();   
138. this.loop();   
139. }
140. }
142. window.RAF = (function(){
143. return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };   
144. })();   
146. ゲームに戻る;   
147. }();   
149. function getRandom(a , b){
150. return Math.random()*(b-a) a;   
151. }
153. window.onload = function(){
154. testBox.start();   
155. }
156. スクリプト>
157. ボディ>
158. html>

オフスクリーン キャンバスに関する別の注意事項があります。オブジェクトの作成と破棄を継続的に行う場合は、少なくとも上で書いたように各オブジェクトの属性をバインドしないように注意してください。オフスクリーンキャンバスを設定します。

このようにバインドすると、オブジェクトが破棄されるとオフスクリーン キャンバスも破棄され、大量のオフスクリーン キャンバスが常に作成および破棄されるため、キャンバス バッファーが消費されます。 GPU リソースが大量にあるため、ブラウザがクラッシュしたり深刻なフレーム フリーズが発生しやすくなります。解決策は、オフスクリーン キャンバス配列を作成し、十分な数のオフスクリーン キャンバスをプリロードし、まだ生きているオブジェクトのみをキャッシュし、オブジェクトが破棄されたときにキャッシュを解除することです。これによってオフスクリーンのキャンバスが破壊されることはありません。

【requestAnimationFrameを使用する】

これについては詳しく説明しませんが、setTimeout や setInterval ではなく、これがアニメーションに最適なループであることは多くの人が知っていると思います。互換性の記述方法を直接投稿します:

XML/HTML コードコンテンツをクリップボードにコピー

1. window.RAF = (function(){
2. window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || 関数 (コールバック) {window.setTimeout(callback, 1000 / 60 );
3. })();

【浮動小数点演算を避ける】

JavaScript には Math.floor、Math.ceil、parseInt などの非常に便利な丸めメソッドがいくつか用意されていますが、外国人の友人がテストを行っており、parseInt メソッドは追加の作業 (データが有効な値かどうかの検出、parseInt など) を実行します。最初にパラメータを文字列に変換することもできます。) したがって、parseInt を直接使用すると、比較的パフォーマンスに負荷がかかります。したがって、切り上げ方法としては、外国人が作成した非常に賢いメソッドを直接使用できます。

JavaScript コードコンテンツをクリップボードにコピーします

1.rounded = (0.5 somenum) 0; 2.rounded = ~~ (0.5 somenum)

演算子がわからない場合は、ここをクリックしてください: http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp 内に詳細な説明があります

【canvasAPI呼び出しを可能な限り減らす】

パーティクル エフェクトを作成するときは、円をできるだけ使用せず、できれば正方形を使用してください。パーティクルが小さすぎるため、正方形は円に似てしまいます。理由としては、円を描くには 3 つのステップが必要であることが分かります。まず beginPath を使用して円弧を描き、次に fill を使用してそれを塗りつぶして円を作成します。ただし、正方形を描画するには、fillRect が 1 つだけ必要です。たった2回の呼び出しの差ですが、パーティクルオブジェクトの数が一定レベルに達すると、パフォーマンスの差が現れます。

他にも注意すべき点がいくつかありますが、Google にはかなりの数の情報があるため、すべてをリストすることはしません。これは主にキャッシュの使用状況を記録するための自分用の記録と言えます。 Canvas のパフォーマンスを向上させたい場合、最も重要なことは、コードの構造に注意を払い、不要な API 呼び出しを減らし、各フレームの複雑な操作を減らすか、複雑な操作を各フレームに 1 回から複数のフレームに 1 回に変更することです。フレーム。同時に、上記のキャッシュの使用では、便宜上、各オブジェクトにオフスクリーン キャンバスを使用しました。実際には、オフスクリーン キャンバスを使用しすぎると、オフスクリーン キャンバスを広範囲に使用できなくなります。パフォーマンス上の問題が発生します。オフスクリーン キャンバスを適切に使用してください。

ソースコードのアドレス:

https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Other-demo/cache