So zeichnen Sie Grafiken mit dem Canvas-Element in HTML5

Heute werde ich Ihnen die Verwendung des Canvas-Elements in HTML5 vorstellen. Es hat einen gewissen Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

[Empfohlener Kurs: HTML5-Tutorial]

Canvas-Element

Verwenden Sie hauptsächlich JavaScript, um Bilder auf Webseiten zu zeichnen, und jedes Pixel kann über verschiedene Methoden zum Zeichnen von Pfaden, Rechtecken und Kreisen sowie zum Hinzufügen von Bildern gesteuert werden. Als nächstes werden wir den

HTML-Code

<canvas id="demo"></canvas>

Rectangle

fillStyle:

fillRect zum Hinzufügen im Detail vorstellen Farbe zu Grafiken (x,y,Breite,Höhe)

x: x-Wert von der oberen linken Ecke

y: y-Wert von der oberen linken Ecke

Breite, Höhe: Es ist die grafische Breite und Höhe

<script type="text/javascript">
var demo=document.getElementById("demo");
var fang=demo.getContext("2d");
fang.fillStyle="pink";
fang.fillRect(0,0,200,50);
</script>

Linie

moveTo: Startposition der Linie

lineTo: Ende Position

Linienbreite: Linienbreite

Strichstil: Farbe

Strich: Zeichnen beginnen

 var demo=document.getElementById("demo");
    var xian=demo.getContext("2d");
      xian.moveTo(10,10);
      xian.lineTo(100,100);
      xian.lineWidth=2;
      xian.strokeStyle="pink";
      xian.stroke();

Kreis

beginPath(): Startpfad

arc(x,y,r,sAngle,eAngle,gegen den Uhrzeigersinn)

x,y : runde Mittelpunktskoordinaten

r: Radius des Kreises

sAngle, eAngle: Startwinkel und Endwinkel des Kreises

gegen den Uhrzeigersinn: beschreibbar oder nicht gibt an, ob es sein soll Die Stundenzeigerzeichnung kann gegen den Uhrzeigersinn oder im Uhrzeigersinn erfolgen. False = im Uhrzeigersinn, true = gegen den Uhrzeigersinn.

var demo=document.getElementById("demo");
    var yuan=demo.getContext("2d");
    yuan.beginPath();
    yuan.arc(100,100,50,0,2*Math.PI);
    yuan.strokeStyle="pink";
    yuan.stroke();

Grafikeinfügung

drawImage(img,sx,sy,swidth,sheight ,x,y,width,height)

sx,sy: X-, Y-Koordinatenposition des Schnitts

swidth,sheight: Breite und Höhe des Schnittbildes

x,y: die x,y-Koordinatenposition der Platzierung des Bildes auf der Leinwand

width,height: die Breite und Höhe des zu verwendenden Bildes

var demo=document.getElementById("demo");
var img1=document.getElementById("img1");
var img=demo.getContext("2d"); 
img1.onload=function(){  
img.drawImage(img1,10,10,100,120)

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass dieser Artikel für alle hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Grafiken mit dem Canvas-Element in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!