Canvas ist Teil von HTML5 und ermöglicht Skriptsprachen das dynamische Rendern von Bildern. Canvas definiert einen Bereich. Die Breite und Höhe des Bereichs kann durch HTML-Attribute definiert werden, um über einen vollständigen Satz von Zeichenfunktionen (API) auf den Bereich zuzugreifen und dynamische Darstellungen auf der Webseite zu rendern.
2. Was Canvas kannSpiele: Es besteht kein Zweifel, dass Spiele im Bereich HTML5 eine wichtige Rolle spielen. HTML5 ist dreidimensionaler und hinsichtlich der webbasierten Bilddarstellung ausgefeilter als Flash.
Diagrammerstellung: Die Diagrammerstellung wird von Menschen oft ignoriert, aber Kommunikation und Zusammenarbeit innerhalb eines Unternehmens oder zwischen Unternehmen sind untrennbar mit Diagrammen verbunden. Einige Entwickler verwenden mittlerweile HTML/CSS, um Symbole zu erstellen. Natürlich ist auch die Verwendung von SVG (Scalable Vector Graphics) zur vollständigen Diagrammerstellung eine sehr gute Möglichkeit.
Schriftdesign: Die individuelle Darstellung von Schriftarten erfolgt vollständig webbasiert und wird mithilfe der HTML5-Technologie implementiert.
Grafikeditor: Der Grafikeditor kann zu 100 % webbasiert sein.
Andere Inhalte, die in die Website eingebettet werden können: wie Grafiken, Audio, Video und viele andere Elemente, können besser in das Web integriert werden und erfordern keine Plug-Ins.
3. Grundlegende Verwendung von Canvas1. Wenn Sie <canvas> verwenden, müssen Sie zunächst die Attribute „Breite“ und „Höhe“ festlegen und die Größe des Zeichenbereichs angeben. Wenn Sie nur die Breite und Höhe angeben, ohne Stile hinzuzufügen oder Bilder zu zeichnen, ist das Element auf der Seite nicht sichtbar .
<canvas id='draw' width='200px' height='200px'></canvas>
2. Um ein Bild zu zeichnen, müssen wir zuerst die Leinwand abrufen und die Methode getContext() aufrufen und dann den Kontextnamen (2D/3D) übergeben ) |. Der Standardwert dieser beiden Eigenschaften ist #000
var draw = document.getElementById('draw'); //Überprüfen Sie, ob der Browser das <canvas>-Element unterstützt if(draw.getContext){ var context = draw.getContext('2d'); //Zeichne einen roten Rahmen zu the context context.streichStyle = '#f00'; //Die Farbe der innen gefüllten Prärie context.fillStyle = '#0f0';}3. Verwenden Sie die Methode toDataURL(), um das auf dem <canvas>-Element gezeichnete Bild zu exportieren.
var draw = document.getElementById('draw');if(draw.getContext){ //Zeigt das Bild an, toDataURL() ruft einen String mit Base64-String ab var drawURL = draw.toDataURL('image/png') ; = document.createElement('img'); image.src = drawURL;4. Es gibt drei Hauptmethoden zum Zeichnen eines Rechtecks. FillRect() ist die Füllfarbe des Rechtecks, StrokeRect() ist der Strich des Rechtecks und ClearRect() löscht das Rechteck. Diese drei Methoden erhalten alle 4 Parameter x/y/w/h, die Koordinaten der oberen linken Ecke des Rechtecks sowie die Breite und Höhe.
var draw = document.getElementById('draw'); //Überprüfen, ob der Browser das <canvas>-Element unterstützt if(draw.getContext){ var context = draw.getContext('2d'); //Zeichne ein rotes Rechteck und ein grüner Umriss Edge context.fillStyle = '#f00'; context.StrokeStyle = '#0f0'; context.fillRect(10,10,50,50); //Zeichne ein grünes Rechteck mit einem roten Strich context.fillStyle = '#0f0'; context.StrokeRect(10,10,50 , 50); context.fillRect(10,10,50,50); //Ein kleines Rechteck löschen, wo sich die beiden Rechtecke überlappen context.clearRect(40,40,10,10);}5. Zeichnen Sie Pfade. Um einen Pfad zu zeichnen, rufen Sie zuerst die Methode beginPath() auf und verwenden Sie dann die folgende Methode, um den Pfad tatsächlich zu zeichnen.
arc(x,y,radius,startAngle,endAngle,gegen den Uhrzeigersinn)
(x, y) Koordinaten des Kreismittelpunkts, Radius, (startAngle, endAngle) Startwinkel und Endwinkel, gegen den Uhrzeigersinn im Uhrzeigersinn (false)/gegen den Uhrzeigersinn (true)
moveTo(x,y) bewegt den Cursor zu (x,y), ohne eine Linie zu zeichnen. Kann verwendet werden, um die sogenannten vorherigen Punktkoordinaten zu ändern*
arcTo(x1,y1,x2,y2,radius)
Zeichnen Sie eine Kurve vom vorherigen Punkt bis (x2, y2) und durch (x1, y1) mit dem angegebenen Radius
lineTo(x,y) zeichnet eine gerade Linie vom vorherigen Punkt nach (x,y)
rect(x,y,width,height)
Zeichnen Sie ein Rechteck ausgehend von (x, y) mit Breite und Höhe als Breite und Höhe. Diese Methode zeichnet einen rechteckigen Pfad anstelle der unabhängigen Formen, die von StrokeRect() und FillRect() gezeichnet werden.
//Als nächstes eine Uhr ohne Zahlen zeichnen var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //Startpfad context.beginPath( ); /Zeichne den äußeren Kreis context.arc(100,100,99,0,2*Math.PI,false); //Zeichne den inneren Kreis context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Zeichne den Minutenzeiger context.moveTo(100,100); ,15) ; //Zeichne den Stundenzeiger context.moveTo(100,100); //Stroke-Pfad context.Stroke(); context.StrokeStyle = '#f00';6. Es gibt zwei Hauptmethoden zum Zeichnen von Text, fillText() und StrokeText(), die beide vier Parameter |text (zu zeichnender Text)|x|y|maximale Pixelbreite (optional)| erhalten basierend auf den folgenden drei Attributen
Schriftart, Textstil, Größe, Schriftart usw.
textAlign Textausrichtung |start|end|left|right|center|
textBaseline Die Grundlinie des Textes|top|hanging|middle|alphabetic|ideographic|bottom|
//Zeichne 12 Uhr auf dem Zifferblatt context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.fillText('12',100,20);7. Transformation
rotieren(Angel) dreht den Bildwinkel im Bogenmaß um den Ursprung
scale(scaleX,scaleY) skaliert das Bild, x*scaleX,y*scaleY ist standardmäßig 1
translator(x,y) verschiebt den Koordinatenursprung nach (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //Zeichne den äußeren Kreis context.arc(); 100,100,99,0,2*Math.PI,false); //Den inneren Kreis zeichnen context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Transformiere den Ursprung context.translate(100,100); //Drehe den Zeiger context.rotate(1) //Zeichne den Minutenzeigerkontext. moveTo(0, 0); context.lineTo(0,-85); //Zeichne den Stundenzeiger context.moveTo(-65,0); //Stroke-Pfad context.Stroke(); context.StrokeStyle = '#f00';8. Zeichnen Sie ein Bild, drawImage()
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9 Parameter: das zu zeichnende Bild, das Originalbild |x|y|w|h|, das Zielbild |x|y|w|h|
9. Schatten und Farbverläufe
Shadow hat hauptsächlich die folgenden Attributwerte:
var context = draw.getContext('2d'); //Set Shadow context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; Gradient erstellt dort einen neuen linearen Farbverlauf sind vier Parameter |x1|y1|x2|y2|, die die Koordinaten des Startpunkts und die Koordinaten des Endpunkts var Gradient = sind context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0 bedeutet start gradient.addColorStop(1,'#000'); //1 bedeutet end//Verwenden Das definierte Farbverlaufsattribut context.fillStyle = gradient; // Beim Füllen den Farbverlauf einfügen context.fillRect(30,30,50,50);Erstellen Sie einen radialen Farbverlauf createRadialGradient(), die sechs Parameter |x1|y2|radius1|x2|y2|radius2| sind der Mittelpunkt und Radius des ersten Kreises bzw. der zweite Kreismittelpunkt und der Radius.
10. Mithilfe von Bilddaten können Sie die Originalbilddaten über getImageData() abrufen. Vier Parameter |x|y|w|h|. Jedes ImageData-Objekt verfügt über drei Attribute: Breite/Höhe/Daten. Daten sind ein Array, das die Daten jedes Pixels intern speichert. Der Wert jedes Elements liegt zwischen 0 und 255.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; Ein Graufilter var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha //Zeichne das Originalbild context.drawImage(img,0,0,100,100); // Bilddaten abrufen imageData = context.getImageData(0,0,img.width,img.height); data = imageData.data; for(i=0,len=data.length;i<len;i+=4){ red = data[i]; green = data[i+1]; i+3]; //Berechnen Sie den Durchschnitt von rgb Average = Math.floor((red+green+blue)/3); //Setzen Sie den Farbwert ein data[i] = Average; ; data[i+2] = Durchschnitt } imageData.data = data; //Daten auf der Leinwand zeichnen context.putImageData(imageData,0,0)}Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.