Ausführliche Erklärung des HTML5-Canvas (1)-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-03-17 15:32:42

Original

3179 Leute haben es durchsucht

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>

Nach dem Login kopieren

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%">

Nach dem Login kopieren

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);

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!