suchen

Heim  >  Artikel  >  Web-Frontend  >  Welche Rolle spielt das Canvas-Element in HTML5? Einfache Verwendung von

Welche Rolle spielt das Canvas-Element in HTML5? Einfache Verwendung von

青灯夜游
青灯夜游Original
2018-11-12 18:04:426382Durchsuche

Der Inhalt dieses Artikels besteht darin, vorzustellen, was das Canvas-Element von HTML5 bewirkt. Die einfache Verwendung von ; lässt jeden wissen, wie man ein Rechteck mit zeichnet. Ich hoffe, es wird Ihnen hilfreich sein.

Das -Element in HTML5 bietet Ihnen eine einfache, aber leistungsstarke Möglichkeit, Grafiken mit JavaScript zu zeichnen. Es kann zum Zeichnen von Grafiken, zum Zusammenstellen von Fotos oder zum Erstellen einfacher (und nicht ganz so einfacher) Animationen verwendet werden. [Empfohlene verwandte Video-Tutorials: HTML5-Tutorial]

ist ein einfaches Element mit nur zwei spezifischen Attributen „width“ und „height“ und allen Kern-HTML5-Attributen wie id , Name und Klasse usw. 

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Sie können das -Element im DOM leicht finden, indem Sie die getElementById()-Methode wie folgt verwenden: 

var canvas = document.getElementById("mycanvas");

Rendering-Kontext

Die ist zunächst leer. Um etwas anzuzeigen, muss das Skript zunächst auf den Rendering-Kontext zugreifen und darauf zeichnen.

Das Canvas-Element verfügt über eine DOM-Methode namens getContext()-Methode, die die Funktion hat, den Rendering-Kontext und seine Zeichnung abzurufen. Diese Funktion benötigt einen Parameter, nämlich den Typ context2d.

Hier ist der Code, um den erforderlichen Kontext abzurufen und zu überprüfen, ob der Browser das -Element 

var canvas  = document.getElementById("mycanvas");
if (canvas.getContext) {   
   var ctx = canvas.getContext(&#39;2d&#39;);   
   // 此处是绘图代码
} else {   
   // 此处不支持canvas代码
}

Beispiel für Canvas: Zeichnen eines Rechtecks

unterstützt 
<!DOCTYPE HTML><html>
   <head>
   
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type = "text/javascript">
         function drawShape() {
            
            // 使用DOM获取画布元素
            var canvas = document.getElementById(&#39;mycanvas&#39;);

            // 确保在不支持 canvas 时不执行
            if (canvas.getContext) {
               
               // 使用 getContext 来执行 canvas 绘制
               var ctx = canvas.getContext(&#39;2d&#39;);

               // 画形状
               ctx.fillRect(25,25,100,100);
               ctx.clearRect(45,45,60,60);
               ctx.strokeRect(50,50,50,50);
            } else {
               alert(&#39;你需要使用Safari或Firefox 1.5+的浏览器才能看到此演示。&#39;);
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
	</html>

Rendering:

Welche Rolle spielt das Canvas-Element in HTML5? Einfache Verwendung von <Canvas>

Anleitung:

Es gibt drei Möglichkeiten, ein Rechteck auf der Leinwand zu zeichnen:

Welche Rolle spielt das Canvas-Element in HTML5? Einfache Verwendung von <Canvas>

Hier geben x und y die Position der oberen linken Ecke des Rechtecks ​​auf der Leinwand an (relativ zum Ursprung), und Breite und Höhe sind die Breite und Höhe des Rechtecks.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt das Canvas-Element in HTML5? Einfache Verwendung von . Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist die Zeichenkodierung? Wie stelle ich die Zeichenkodierung in HTML5 ein?Nächster Artikel：Was ist die Zeichenkodierung? Wie stelle ich die Zeichenkodierung in HTML5 ein?

In Verbindung stehende Artikel

Mehr sehen