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:426371Durchsuche

Der Inhalt dieses Artikels besteht darin, vorzustellen, was das Canvas-Element von HTML5 bewirkt. Die einfache Verwendung von

Das

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

Sie können das

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

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

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