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

青灯夜游

Freigeben： 2018-11-12 18:04:42

Original

6349 Leute haben es durchsucht

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>

Nach dem Login kopieren

Sie können das

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

Nach dem Login kopieren

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代码
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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