Zusammenfassung der 24 grundlegenden Canvas Knowledge_HTML5-Tutorialfähigkeiten

Jetzt fassen wir die Wissenspunkte von Canvas wie folgt zusammen, damit Sie jederzeit leicht nachschlagen können.

1. Gefülltes Rechteck fillRect(x,y,width,height);

2. Zeichnen Sie einen rechteckigen Rahmen strictRect(x,y,width,height);

3. Rechteck löschen clearRect(x,y,width,height);

4. Füllstil fillStyle="red"; Der Stil kann Farbe, Farbverlauf und Bild sein.

5. Strichstil StrokeStyle="red";

6. Die Breite der Strichlinie lineWidth=4;

7. Linienendform lineCap="butt"; standardmäßig ist es butt;

8. Linienschnittstil lineJoin="mitre";gehrung(scharfe Ecke)/rund(abgerundete Ecke)/bevel(Abschrägung), standardmäßig scharfe Ecke;

9. Beginnen Sie mit dem Zeichnen des Pfades beginPath();

10. Beenden Sie den Pfad closePath(); Wenn Sie nach dem Erstellen des Pfades eine Linie zeichnen möchten, die mit dem Startpunkt des Pfades verbunden ist, können Sie closePath();

aufrufen

11. Zeichnen Sie einen Bogen arc(x,y,radius,startAngle,endAngle,true/false);

12. Zeichnen Sie einen Bogen arcTo(x1,y1,x2,y2,radius) Zeichnen Sie einen Bogen, der vom vorherigen Punkt ausgeht, bei x2, y2 endet und mit dem angegebenen Radius durch diesen verläuft. x1,y1;

13. moveTO(x,y);Bewegen Sie den Zeichencursor zu (x,y), ohne eine Linie zu zeichnen

14. lineTo(x,y); Zeichnen Sie eine gerade Linie ausgehend vom vorherigen Punkt

15. Quadratische Bezier-Kurve: quadraticCurveTo(cx,cy,x,y); Zeichnen Sie eine quadratische Kurve, die beim vorherigen Punkt beginnt und bei x, y, cy endet .

16. Kubische Bézier-Kurve: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); Zeichnen Sie eine quadratische Kurve, die beim vorherigen Punkt beginnt und bei x, y, cx1, cy1 endet cx2,cy2 als Kontrollpunkte.

17. rect(x,y,width,height);Zeichnen Sie ein Rechteck ausgehend von Punkt x, y. Die Breite und Höhe werden durch Breite bzw. Höhe angegeben. Diese Methode zeichnet einen rechteckigen Pfad, keine unabhängige Form.

18. Text zeichnen:

　(1) Fülltext: fillText("hello",x,y,width); width ist die optionale maximale Pixelbreite. Wenn der Text größer als die maximale Breite ist, wird er auf die maximale Breite verkleinert.
　(2) Textstrich: StrokeText("hello",x,y,width);width ist die optionale maximale Pixelbreite.
　(3) Textstil: font="bold 14px Arial";
　(4) Horizontale Textausrichtung: textAlign='start'; // Anfang, Ende, links, rechts, Mitte. Standardwert: Start. An der vertikalen Achse ausrichten, wobei der Startpunkt (x, y) des Textes als Basispunkt dient.
　(5) Vertikale Textausrichtung: textBaseline='alphabetic'; //oben, hängend, mitte, alphabetisch, ideografisch, unten. Standardwert: alphabetisch. Auf der horizontalen Achse ausrichten, wobei der Startpunkt (x, y) des Textes als Basispunkt dient.
(6) Textbreite: var text="hello"; var length=context.measureText(text); der Parameter text ist der zu zeichnende Text

19. Transformation

　(1) Drehen (Winkel): Drehen Sie den Bildwinkel um den Ursprung.
Sie können auch transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math . cos(angle*Math.PI/180),0,0);
　(2) scale(x,y): Skaliert das Bild. Sie können auch transform(x,0,0,y,0,0);
　(3) translator(x,y) verwenden: Verschieben Sie den Koordinatenursprung nach x,y, die Koordinaten 0, 0 wird zum Punkt, der zuvor durch x, y dargestellt wurde. Sie können auch transform(1,0,0,1,x,y);
　(4) transform(, , ,,x, y verwenden ) ;
　(5) setTransform(, , ,,x, y);Setzen Sie die Transformationsmatrix auf den Standardzustand zurück und rufen Sie dann transform() auf ;

20. Grafische Kombination

Code kopieren

Der Code lautet wie folgt:

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; Optionale Werte sind wie in /* */.
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
Source-Over (Standardwert):
Destination-Over: Zeichnen Sie eine neue Grafik unter der Originalgrafik.
Source-In: Führen Sie eine In-Operation zwischen der neuen Grafik und der Originalgrafik durch und zeigen Sie nur den Unterschied an zwischen der neuen Grafik und der Originalgrafik Überlappende Teile der Grafik
Ziel-in: Die Originalgrafik und die neue Grafik werden wie in bedient, und nur die Teile der neuen Grafik, die sich mit der Originalgrafik überlappen, werden angezeigt
source-out: Die neuen Grafiken und die Originalgrafiken werden als Out-Operation ausgeführt. Es werden nur die Teile der neuen Grafik angezeigt, die sich nicht mit der Originalgrafik überschneiden.
destination-out: Out-Operation für die neue Grafik und das Original ausführen Grafik, zeigen Sie nur die Teile der neuen Grafik an, die sich nicht mit der Originalgrafik überlappen
Quelle oben: Zeichnen Sie nur den Teil der neuen Form, der die Originalform überlappt, und den Teil der Originalform, der nicht überlappt
Ziel -atop: Zeichnen Sie nur den Teil der Originalform, der von der neuen Form überlappt wird, und andere Teile der neuen Form.
heller: Sowohl die Originalform als auch die neue Form werden gezeichnet und die überlappenden Teile werden gefärbt
>*/

21. Grafikschatten zeichnen

Code kopierenDer Code lautet wie folgt:

context.shadowOffsetX=10; //Shadow Die horizontale Verschiebung des Schattens

context.shadowOffsetY=10; //Die vertikale Verschiebung des Schattens
context.shadowColor='rgba(100,100,100,0.5)'; //Die Farbe des Schattens
context.shadowBlur=7; //Unscharfer Schattenbereich

22. Bilder zeichnen, anordnen und zuschneiden

Code kopierenDer Code lautet wie folgt:

context.drawImage(image, x,y );

context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx ,sy und sw, sh sind die Startkoordinaten und Höhe des kopierten Bereichs des Quellbildes, dx, dy und dw, dh sind die Zielkoordinaten und Höhe des kopierten Bereichs.
context.createPattern(image,type); Bildkacheln, Parameter können sein: no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //Crop-Funktion

Beispiel:

Code kopierenDer Code lautet wie folgt:

image=new Image() ; // Ein Bildobjekt erstellen

image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern legt die Kachelung fest effect,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //Der Zweck dieser Methode besteht darin, zu verhindern, dass das Bild verarbeitet wird, wenn Das Bild ist eine relativ große Netzwerkbilddatei. Sie sehen das Bild erst, wenn alles geladen ist, sodass Sie während des Ladens zeichnen können.
drawImg(context,image);
}
function drawImg(context,image){
//Zeichne das Originalbild
context.drawImage(image,10,10,125,125);
//Lokale Vergrößerung
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}

23. Speichern und wiederherstellen

contex.save(); Speichert den aktuellen Status im Stapel. Hinweis: Gespeichert werden nur die Einstellungen und Transformationen der gezeichneten Grafiken, nicht der Inhalt der gezeichneten Grafiken.

context.restore(); Rufen Sie den zuvor gespeicherten Grafikstatus vom Stapel ab

Anwendbare Gelegenheiten:
(1) Bild- oder Grafikverformung
(2) Bildzuschnitt
(3) Beim Ändern die Eigenschaften des Grafikkontexts: fillStyle, font, globalAlpha, globalComposite-Operation, lineCap, lineJoin, lineWidth, miterLimit,shadowBlur,shadowColor,
shadowOffsetX,shadowOffsetY, StrokeStyle, textAlign, textBaseline

24. Linearer Farbverlauf

Code kopierenDer Code lautet wie folgt:

var g=context.createLinearGradient (xStart, yStart,xEnd,yEnd);

var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');
g.addColorStop (0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);