Heim > Artikel > Web-Frontend > Ausführliche Erklärung des HTML5-Canvas (1)

Ausführliche Erklärung des HTML5-Canvas (1)

黄舟Original: 2017-03-17 15:32:423058Durchsuche

Das

canvas-Element in HTML5 wird zum Zeichnen von Grafiken auf Webseiten verwendet.

Funktionen von Canvas

Canvas Canvas ist ein rechteckiger Bereich, jedes seiner Pixel kann gesteuert werden
Canvas verwendet JavaScript zum Steuern des Zeichnens
Canvas verfügt über Methoden für Linien, Rechtecke, Kreise und das Hinzufügen von Bildern

Verwendung des Canvas-Tags

Die Folgender Code besteht darin, mithilfe des Canvas-Bildschirms ein 200 * 200 großes rotes Rechteck zu zeichnen:

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);
    </script>
    </body>
    </html>

Speichern Sie den obigen Code als canvas.html und setzen Sie seine Codierung auf utf-8 (ansonsten der chinesische verstümmelte Code). ), verwenden Sie den Browser. Wenn Sie ihn öffnen, können Sie den folgenden Effekt sehen:
Ausführliche Erklärung des HTML5-Canvas (1)

<canvas id="myCanvas" width="200"    style="max-width:90%">

HierErstellen Sie ein Canvas-Tag und definieren Sie seine ID als myCanvas Erleichtern Sie JavaScriptZeichnen Holen Sie sich das Tag Objekt .
Sehen Sie sich den JavaScript-Zeichnungsteil noch einmal an:

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);

Der erste Satz, getElementById, ruft das Canvas-Objekt über die ID des Canvas-Tags ab.
Der zweite Satz, getContext, ruft das Kontextobjekt ab.
Der dritte Satz ruft die Methode fillStyle des Context-Objekts auf, füllt also dessen Farbe.
Der vierte Satz ruft die fillRect-Methode des Context-Objekts auf, um den gefüllten Bereich anzugeben.

Andere Instanzen von Canvas

Gerade Linie

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();</script></body></html>

Die laufenden Ergebnisse sind wie folgt:
Ausführliche Erklärung des HTML5-Canvas (1)

Kreis

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();</script></body></html>

Das Laufergebnis ist wie folgt:
Ausführliche Erklärung des HTML5-Canvas (1)

Gradient

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
    </script>
    </body>
    </html>

Der Effekt ist wie folgt:
Ausführliche Erklärung des HTML5-Canvas (1)

Bild

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var img=new Image();
    img.src="1.png";
    img.onload=function(e){
        cxt.drawImage(img,0,0);
    }
    cxt.drawImage(img,0,0);
    </script>
    </body>
    </html>

Beachten Sie, dass Sie das Onload--Ereignis zu Img hinzufügen müssen, andernfalls wird das Bild nicht angezeigt.
Davon ist 1.png das Bildmaterial, das ich gefunden habe. Wenn Sie die Seite öffnen, können Sie sehen, dass das Bild auf der Leinwand angezeigt wird. Mein Laufeffekt ist wie folgt, die Bilder werden zufällig auf Baidu gefunden, schauen Sie es sich einfach an~~
Ausführliche Erklärung des HTML5-Canvas (1)

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des HTML5-Canvas (1). 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：Detaillierte Erläuterung des Pushstate- und Popstate-Vorgangsverlaufs von HTML5, ohne das aktuelle URL-Codebeispiel zu aktualisieren und zu ändernNächster Artikel：Detaillierte Erläuterung des Pushstate- und Popstate-Vorgangsverlaufs von HTML5, ohne das aktuelle URL-Codebeispiel zu aktualisieren und zu ändern

In Verbindung stehende Artikel

Mehr sehen