Eine kurze Diskussion darüber, was Canvas leisten kann

Der Inhalt dieses Artikels besteht darin, kurz darüber zu sprechen, was Canvas tun kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Was kann

Canvas?

Canvas ist ein neues Element in HTML5. Sie können Javascript zum Zeichnen von Grafiken, Symbolen und allem anderen verwenden visuelle Bilder. Es können damit auch Bildeffekte und Animationen erstellt werden. Wenn Sie den gesamten Befehlssatz beherrschen, können Sie mit Canvas umfangreiche Webanwendungen erstellen. Wenn Sie Canvas gut nutzen möchten, sollten Sie zunächst Javascript gut beherrschen. [Empfohlene verwandte Video-Tutorials: JavaScript-Tutorial]

LeinwandTag

<canvas width="400" height="300">
</canvas>

Natürlich können Sie es auch durch setzen CSS Auf jeden Fall! Wenn Sie Breite und Höhe nicht festlegen, beträgt die Standardbreite und -höhe 300 x 150.

Bei Browsern niedrigerer Versionen fügen Sie die Informationen, die Sie für das Feedback benötigen, zwischen Canvas-Tags ein.

<canvas width="400" height="300">
    <p>你想看我，就升级浏览器吧！</p>
</canvas>

Holen Sie sich den Kontext, alle Ihre Malvorgänge sind im Kontext, unterstützt derzeit nur 2D.

window.onad=function(){    
     var canvas = document.getElementById("myCanvas");    
     var context= can.getContext("2d");
}

Für Retina-Display

Es ist ganz einfach, die Leinwand auf Retina- und Standard-Definition-Displays klar anzuzeigen. Passen Sie einfach den Bildschirm an. Multiplizieren Sie einfach das Verhältnis wird durch die Pixeldichte der Leinwand bestimmt. Zunächst müssen Sie verstehen, wie Pixelwerte auf einer Leinwand gespeichert werden.

Backup-Speicher ist der Farbwert jedes Pixels, das Daten auf der Leinwand speichert. Unser Ziel ist es, für jedes auf der Leinwand angezeigte Pixel ein Pixel im Backstore zu haben. Bevor Pixel auf den Bildschirm übertragen werden, werden hier ihre Werte berechnet. Allerdings entspricht die Anzahl der im Hintergrundspeicher dargestellten Pixel möglicherweise nicht der Anzahl der auf den Bildschirm übertragenen Pixel. Auf Retina-Geräten werden Breite und Höhe der Leinwand verdoppelt, um eine konsistente Größe und Position relativ zu anderen HTML-Elementen beizubehalten. Dadurch wird der Inhalt gedehnt und verdeckt. Um dieser Dehnung entgegenzuwirken, müssen Sie die Breite und Höhe des Trägerlagers entsprechend verdoppeln.

Wenn Sie Rasterbilder oder Videodaten verarbeiten, erfahren Sie, wie Sie die Leinwand für die „Pixelverarbeitung für Retina-Displays“ weiter optimieren können. Da eine größere Leinwand in jedem Fall möglicherweise nicht von Vorteil ist, müssen Sie „Optimierung“ wählen Ihr Canvas ist für Retina-Geräte. Stellen Sie zunächst sicher, dass der Monitor, der Ihre Leinwand darstellt, tatsächlich Retina-fähig ist. Wenn ja, skalieren Sie den Hintergrundspeicher entsprechend dem Pixelverhältnis des Geräts.

Einerseits haben Retina-Geräte ein Pixelverhältnis von 2, da das Verhältnis von Anzeigepixeln zu Hintergrundspeicherpixeln in x- und y-Richtung 2:1 beträgt. Standardauflösungsmonitore hingegen ordnen 1 Hintergrundspeicherpixel einem Anzeigepixel zu, sodass ihr Gerätepixelverhältnis immer 1 beträgt.

In JavaScript können Sie die Faktoren bestimmen, die das Fallback-Verhältnis bestimmen. Überprüfen Sie zunächst, ob der Browser window.devicePixelRatio definiert hat. Wenn das Pixelverhältnis des Geräts größer als 1 ist, befindet sich der Benutzer auf einem Retina-Display. Der Code zur Bestimmung des geeigneten Sicherungsverhältnisses lautet wie folgt:

window.onload=function(){
       var canvas = document.getElementById("myCanvas");
      var context= canvastContext("2d");
       var scaleFactor = backingScale(ctx);
       if (scaleFactor > 1) {
              canvas.width = canvas.width * scaleFactor;
              canvas.height = canvas.height * scaleFactor;
              // update the context for the new canvas scale
              var context = canvas.getContext("2d");
       }
}
 function backingScale(context) {
              if ('devicePixelRatio' in window) {
                     if (window.devicePixelRatio > 1) {
                            return window.devicePixelRatio;
                     }
              }
              return 1;

}

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt.

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, was Canvas leisten kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!