Eine kurze Diskussion über die Verwendung des Caches zur Optimierung der Leistung von HTML5 Canvas. Programm_HTML5-Tutorial-Fähigkeiten

Wenn Sie zu viel mit der Leinwand herumspielen, werden Sie automatisch über Leistungsprobleme nachdenken. Wie optimiert man die Leinwandanimation?

【Cache verwenden】

Cache verwenden bedeutet, für das Vorrendern eine Off-Screen-Leinwand zu verwenden. Das Prinzip ist sehr einfach: Zeichnen Sie zuerst in eine Off-Screen-Leinwand und zeichnen Sie dann die Off-Screen-Leinwand über drawImage in die Haupt-Leinwand. Viele Leute verstehen das vielleicht falsch. Ist das nicht ein doppelter Puffermechanismus, der in Spielen häufig verwendet wird?

Tatsächlich wird der doppelte Puffermechanismus in der Spielprogrammierung verwendet, um ein Flackern des Bildschirms zu verhindern. Daher wird vor dem Benutzer eine Leinwand angezeigt und beim Zeichnen wird der Bildschirminhalt zuerst angezeigt Hintergrund-Leinwand, und dann wird die Hintergrund-Leinwand gezeichnet. Die Daten in der Leinwand werden auf die vordere Leinwand gezeichnet. Dies ist eine doppelte Pufferung, aber in Canvas gibt es keine doppelte Pufferung, da moderne Browser grundsätzlich über einen integrierten Doppelpufferungsmechanismus verfügen. Daher stellt die Verwendung von Off-Screen-Canvas keine doppelte Pufferung dar, sondern behandelt Off-Screen-Canvas als Cache-Bereich. Zwischenspeichern Sie Bildschirmdaten, die wiederholt gezeichnet werden müssen, um den Verbrauch beim Aufrufen der Canvas-API zu reduzieren.

Wie wir alle wissen, verbraucht der Aufruf der Canvas-API die Leistung, wenn wir einige wiederholte Bildschirmdaten zeichnen möchten. Sie können sich die folgende DEMO ansehen

1. Es wird kein Cache verwendet

　2. Cache wird verwendet, aber die Breite und Höhe der Off-Screen-Leinwand sind nicht festgelegt

3. Cache wird verwendet, aber die Breite und Höhe der Off-Screen-Leinwand sind nicht festgelegt

　4. Verwenden Sie Caching und legen Sie die Breite und Höhe der Off-Screen-Leinwand fest

Sie können sehen, dass die Leistung der obigen DEMO unterschiedlich ist. Lassen Sie uns die folgenden Gründe analysieren: Um den Stil jedes Kreises zu erreichen, habe ich beim Zeichnen von Kreisen das Schleifenzeichnen verwendet Kreise auf der Seite Wenn ein bestimmter Punkt erreicht ist, ist für jeden Frame der Animation eine große Anzahl von Canvas-API-Aufrufen und eine große Menge an Berechnungen erforderlich, sodass er unabhängig von der Qualität des Browsers angezeigt wird runter.
XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. ctx.save();   
2.                         var j=0;   
3.                                                     for(var i=
1
4. ;ithis.r;i =borderWidth){                                ctx.beginPath();                                   
5.                            ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
6.                             ctx.Stroke();                                j ;                            }   
7.                         ctx.restore();  
　　所以,我的方法很简单,每个圈圈对象里面给他一个离屏canvas作缓存区.
9. 　　除了创建离屏canvas作为缓存之外，下面的代码中有一点很关键,就是要设置离屏canvas的宽度和高度，Leinwand生成后的默认大小是300X150；对于我的代码中每个缓存起来圈圈对象半径最大也就不超过80, 所以300X150的大小明显会造成很多空白区域, 会造成资源浪费, 所以就要设置一下离屏Leinwand的宽度和高度, 让它跟缓存起来的元素大小一致上面的四个demo很明显的显示出了性能差距,如果没有设置宽高，当页面超过400个圈圈对象时就会卡的不行了,而设置了宽高1000个圈圈对象也不觉得卡.
10. XML/HTML-Code
11. 复制内容到剪贴板
    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.color = [];   
    7.                                     
    this
    8. this.cacheCtx = this.cacheCanvas.getContext("2d");                    this.cacheCanvas.width
     = 
    9. 2*this.r;                    
    this.cacheCanvas.height
    10.  = 2*this.r;                    var 
    num
    11.  = getZ(this.r/borderWidth);                    for(var 
    j
    12. =0;jnum
    ;j ){   
    13.                     this.color.push("rgba(" getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) ",1)");                    }                    this.useCache = useCache;   
    14.                 if(useCache){   
    15.                     this.cache();   
    16.                 }                }  

    17. Wenn ich das Kreisobjekt instanziiere, rufe ich direkt die Cache-Methode auf, zeichne den komplexen Kreis direkt in die Off-Screen-Leinwand des Kreisobjekts und speichere ihn.
        

        XML/HTML-CodeInhalt in die Zwischenablage kopieren

        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();
        6.  
        this
        7. this.cacheCtx.StrokeStyle = this.color[j]; this.cacheCtx.arc(this.r, this.r, i, 0, 2*Math.PI);
        8. this.cacheCtx.Stroke();
        9. j ;
        10.                                                                     
        this.cacheCtx.restore();
                                                                                         
        Dann muss ich in der nächsten Animation nur die Off-Screen-Leinwand des Kreisobjekts in die Hauptleinwand zeichnen. Auf diese Weise enthält die in jedem Frame aufgerufene CanvasAPI nur diesen Satz:
        XML/HTML-Code

        Inhalt in die Zwischenablage kopieren
        ctx.drawImage(this.cacheCanvas, this.x-this.r, this.y-this.r);

        Im Vergleich zum vorherigen for-Schleifenzeichnen ist es wirklich viel schneller. Wenn wir also wiederholt Vektorgrafiken oder mehrere Bilder zeichnen müssen, können wir sinnvollerweise die Off-Screen-Leinwand verwenden, um die Bilddaten im Voraus zwischenzuspeichern, was den unnötigen Leistungsverbrauch bei jedem nachfolgenden Bildvorgang reduzieren kann.

        1. Der Smooth-Versionscode für 1000 Kreisobjekte ist unten aufgeführt: 　
        XML/HTML-Code

        Inhalt in die Zwischenablage kopieren
        1. html>  
        2. html lang="en" >  
        3. Kopf>  
        4.     meta charset="UTF- 8">  
        5.     Stil>  
        6.         Körper{   
        7.             padding:0;   
        8.             marge:0;   
        9.             Überlauf: versteckt;   
        10.         }   
        11.         #cas{   
        12.             display: block;   
        13.             background-color:rgba(0,0,0,0);   
        14.             margin:auto;   
        15.             border:1px solid;   
        16.         }
        17.  Stil> 
        18.  Titel>TestTitel>
        19. Kopf>
        20. Körper>
        21. div >
        22.  canvas id='cas' Breite="800" Höhe="600">Der Browser unterstützt kein CanvasCanvas > ;
        23.  div style="text- align:center">1000 Kreisobjekte bleiben nicht hängendiv>
        24.  div> 
        26.  Skript> 
        27. var testBox = function(){
        28. var canvas = document.getElementById("cas"),
        29. ctx = canvas.getContext('2d'),
        30.  borderWidth = 2,
        31. Bälle = [];
        var
        32. ball = function(x, y, vx, vy, useCache){
         
        33. this.x = x;  
        this.y
        34. = y;  this.vx
        = vx;
        35.                 this.vy = vy;   
        36.                                     this.color = [];   
        37.                                     
        this
        38. this.cacheCtx = this.cacheCanvas.getContext("2d");                    this.cacheCanvas.width
         = 
        39. 2*this.r;                    
        this.cacheCanvas.height
        40.  = 2*this.r;                    var 
        num
        41.  = getZ(this.r/borderWidth);                    for(var 
        j
        42. =0;jnum
        ;j ){   
        43.                     this.color.push("rgba(" getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) ",1)");                    }                    this.useCache = useCache;   
        44.                 if(useCache){   
        45.                     this.cache();   
        46.                 }                }  
        47.   
        48.             function getZ(num){   
        49.                 var gerundet;   
        50.                 gerundet = (0,5   num) | 0;   
        51.                 // Ein double bitwise not.   
        52.                 gerundet = ~~ (0,5   num);   
        53.                 // Schließlich eine bitweise Linksverschiebung.   
        54.                 🎜>0;                       return gerundet;                }  
        55.   
        56.             ball.prototype = {   
        57.                 paint:function(ctx){   
        58.                     if(!this.useCache){   
        59.                         ctx.save();   
        60.                         var j=0;   
        61.                                                     for(var i=
        1
        62. ;ithis.r;i =borderWidth){                                ctx.beginPath();                                   
        63.                            ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
        64.                             ctx.Stroke();                                j ;                            }   
        65.                         ctx.restore();   
        66.                     } else{   
        67.                         ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);   
        68.                     }   
        69.                 },   
        70.   
        71.                 cache:function(){   
        72.                     this.cacheCtx.save();   
        73.                     var j=0;   
        74.                                             for(var i=
        1
        75. ;ithis.r;i =borderWidth){                            this.cacheCtx.beginPath();                               
        76.                         this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
        77.                         this.cacheCtx.Stroke();                            j ;   
                            }   
                            this.cacheCtx.restore();   
                        },   
          
                        move:function(){   
                            this.x  = this.vx;   
                            this.y  = this.vy;   
                            if(this.x
        85. >
        (canvas.width-this.r)||this.x
        this.r
        87. ){   
        88.                         🎜>?this.r:(canvas.width-this.r);                             this.vx = -this.vx;   
        89.                     }  
        90.                     if(this.y>(canvas.height-this.r)||this.y this.r){   
        91.                         🎜>?this.r:(canvas.height-this.r);                             this.vy = -this.vy;                        }   
        92.                        this.paint(ctx);   
        93.                 }   
        94.             }   
        95.   
        96.             var 
        97. Spiel = {   
        98.                 init:function(){   
        99.                     for(var i=
        100. 0;i
        101. 1000;i ){                            var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas .height) , getRandom(-10 , 10) ,  getRandom(-10 , 10) , true)   
        102.                         Balls.push(b);                        }                    },   
        103.   
        104.                 update:function(){   
        105.                     ctx.clearRect(0,0,canvas.width,canvas.height);   
        106.                     for(var 
        107. i=
        108. 0;i
        109. Kugellänge;i ){                            Balls[i].move();                        }                    },   
        110.   
        111.                 loop:function(){   
        112.                     var _this = this;   
        113.                     this.update();   
        114.                     RAF(function(){   
        115.                         _this.loop();   
        116.                     })   
        117.                 },   
        118.   
        119.                 start:function(){   
        120.                     this.init();   
        121.                     this.loop();   
        122.                 }   
        123.             }   
        124.   
        125.             window.RAF = (function(){   
        126.                 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || Funktion (Rückruf) {window.setTimeout(callback, 1000 / 60); };   
        127.             })();   
        128.   
        129.             return Game;   
        130.         }();   
        131.   
        132.         function getRandom(a , b){   
        133.             return Math.random()*(b-a) a;   
        134.         }   
        135.   
        136.         window.onload = function(){   
        137.             testBox.start();   
        138.         }   
        139.     Skript>  
        140. Körper>  
        141. html>  

    Es gibt noch einen weiteren Hinweis zur Off-Screen-Leinwand: Wenn der Effekt, den Sie erzielen, darin besteht, kontinuierlich Objekte zu erstellen und zu zerstören, verwenden Sie die Off-Screen-Leinwand bitte mit Vorsicht. Binden Sie zumindest nicht die Attribute jedes Objekts, wie ich oben geschrieben habe. Stellen Sie eine Leinwand außerhalb des Bildschirms ein.

    Denn wenn das Objekt auf diese Weise gebunden wird, wird auch die Leinwand außerhalb des Bildschirms zerstört, und es wird ständig eine große Anzahl von Leinwänden außerhalb des Bildschirms erstellt und zerstört, was dazu führt, dass der Leinwandpuffer a verbraucht Sie beanspruchen viele GPU-Ressourcen und führen leicht zum Absturz des Browsers oder zu ernsthaften Frame-Einfrierungen. Die Lösung besteht darin, ein Off-Screen-Canvas-Array zu erstellen, eine ausreichende Anzahl von Off-Screen-Canvas vorab zu laden, nur die noch lebenden Objekte zwischenzuspeichern und sie aus dem Cache zu entfernen, wenn die Objekte zerstört werden. Dadurch wird die Leinwand außerhalb des Bildschirms nicht zerstört.

    【RequestAnimationFrame verwenden】

    Ich werde das nicht im Detail erklären. Ich denke, viele Leute wissen, dass dies die beste Schleife für Animationen ist, nicht setTimeout oder setInterval. Veröffentlichen Sie direkt die Schreibmethode für die Kompatibilität:

    XML/HTML-CodeInhalt in die Zwischenablage kopieren

    1. window.RAF = (function(){
    2. window.requestAnimationFrame ||. window.mozRequestAnimationFrame ||. window.msRequestAnimationFrame ||.
    3. })();

    　

    【Gleitkommaoperationen vermeiden】

    Obwohl JavaScript einige sehr praktische Rundungsmethoden bereitstellt, wie z. B. Math.floor, Math.ceil und parseInt, haben ausländische Freunde Tests durchgeführt und die parseInt-Methode erledigt einige zusätzliche Arbeiten (z. B. das Erkennen, ob die Daten ein gültiger Wert sind, parseInt). konvertiert den Parameter sogar zuerst in einen String!), daher ist die direkte Verwendung von parseInt relativ leistungsintensiver. Um es zusammenzufassen: Sie können direkt eine sehr clevere Methode verwenden, die von Ausländern geschrieben wurde:

    JavaScript-CodeInhalt in die Zwischenablage kopieren
    1.gerundet = (0,5 Somenum) | 2.gerundet = ~~ (0,5 Somenum); 3.gerundet = (0,5 Somenum)
    Wenn Sie die Operatoren nicht verstehen, können Sie einfach hier klicken: http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp
    Darin finden Sie detaillierte Erklärungen

    　
    【CanvasAPI-Aufrufe so weit wie möglich reduzieren】
    Versuchen Sie beim Erstellen von Partikeleffekten, so wenig Kreise wie möglich zu verwenden und verwenden Sie vorzugsweise Quadrate. Da die Partikel zu klein sind, ähneln Quadrate Kreisen. Der Grund dafür ist leicht zu verstehen: Wir benötigen drei Schritte, um einen Kreis zu zeichnen: Zuerst beginPath, dann verwenden Sie arc, um einen Bogen zu zeichnen, und verwenden Sie dann fill, um ihn zu füllen, um einen Kreis zu erstellen. Aber um ein Quadrat zu zeichnen, brauchen Sie nur ein fillRect. Obwohl es nur einen Unterschied zwischen zwei Aufrufen gibt, wird die Leistungslücke sichtbar, wenn die Anzahl der Partikelobjekte ein bestimmtes Niveau erreicht.
    Es gibt noch einige andere Dinge zu beachten, ich werde sie nicht alle auflisten, da es bei Google einige davon gibt. Dies kann als Aufzeichnung für mich selbst betrachtet werden, hauptsächlich um die Cache-Nutzung aufzuzeichnen. Wenn Sie die Leistung von Canvas verbessern möchten, ist es am wichtigsten, auf die Struktur des Codes zu achten, unnötige API-Aufrufe zu reduzieren, komplexe Vorgänge in jedem Frame zu reduzieren oder komplexe Vorgänge von einmal für jeden Frame auf einmal für mehrere zu ändern Rahmen. Gleichzeitig habe ich für die oben erwähnte Cache-Nutzung der Einfachheit halber für jedes Objekt eine Off-Screen-Leinwand verwendet. Wenn Sie dort zu viele Off-Screen-Leinwände verwenden Es wird zu Leistungsproblemen kommen. Versuchen Sie Ihr Bestes, die Leinwand außerhalb des Bildschirms zu nutzen.
    Quellcode-Adresse:

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