HTML => Segeltuch

Parameter

Attribut	Beschreibung
Höhe	Gibt die Leinwandhöhe an
Breite	Gibt die Leinwandbreite an

Bemerkungen

Dieses Tag ist nicht mit weniger als 9 Versionen von Internet Explorer kompatibel. Überprüfen Sie caniuse.com auf Browserkompatibilität.
canvas ist nur ein Container für Grafiken, und das eigentliche Zeichnen von Grafiken wird von JavaScript ausgeführt.

Basisbeispiel

Das canvas Element wurde in HTML5 zum Zeichnen von Grafiken eingeführt.

<canvas id="myCanvas">
   Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

Das Obige erstellt ein transparentes HTML <canvas> -Element mit einer Größe von 300 × 150 px.

Mit dem Canvas- Element können Sie erstaunliche Elemente wie Formen und Grafiken zeichnen, Bilder bearbeiten, ansprechende Spiele erstellen usw. mit JavaScript .
Die canvas ist 2D ziehbar Schichtoberfläche Objekt wird bezeichnet als CanvasRenderingContext2D ; oder aus einem HTMLCanvasElement mit der .getContext("2d") Methode:

var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

jsFiddle-Beispiel

Zeichnen von zwei Rechtecken auf einem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
    <style>
      canvas{
          border:1px solid gray;
      }
    </style>
    <script async>
      window.onload = init; // call init() once the window is completely loaded
      function init(){
        // #1 - get reference to <canvas> element
        var canvas = document.querySelector('canvas');
        
        // #2 - get reference to the drawing context and drawing API
        var ctx = canvas.getContext('2d');

        // #3 - all fill operations are now in red
        ctx.fillStyle = 'red'; 

        // #4 - fill a 100x100 rectangle at x=0,y=0
        ctx.fillRect(0,0,100,100);
        
        // #5 - all fill operations are now in green
        ctx.fillStyle = 'green'; 
        
        // #6 - fill a 50x50 rectangle at x=25,y=25
        ctx.fillRect(25,25,50,50);
        
      }
      </script>
</head>
<body>
  <canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>
</html>

Dieses Beispiel sieht folgendermaßen aus:

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

HTML
Segeltuch

Suche…

Parameter

Bemerkungen

Basisbeispiel

Zeichnen von zwei Rechtecken auf einem