Detaillierte Einführung und Verwendungsanleitung des Canvas-Attributs

Zusammenfassung der Canvas-Attribute und Anwendungsleitfaden

1. Canvas ist ein von HTML5 bereitgestelltes Element zum Zeichnen von Grafiken. Es kann Grafiken dynamisch im Browser zeichnen und mit anderen HTML-Elementen kombiniert werden . Das Canvas-Element verfügt über viele Attribute. In diesem Artikel werden die häufig verwendeten Canvas-Attribute zusammengefasst und entsprechende Anwendungsrichtlinien und Codebeispiele gegeben.

Breite und Höhe
1. Diese beiden Attribute geben die Breite bzw. Höhe des Canvas-Elements in Pixel an. Durch Festlegen dieser beiden Eigenschaften können Sie die Größe des Zeichenbereichs steuern.
   

<canvas id="myCanvas" width="500" height="300"></canvas>

getContext()
2. getContext()-Methode gibt ein Objekt für den Zeichenkontext zurück, über den Zeichenvorgänge ausgeführt werden können.
   

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

fillStyle- und StrokeStyle
3. fillStyle-Eigenschaften werden zum Festlegen der Füllfarbe verwendet, und die StrokeStyle-Eigenschaft wird zum Festlegen der Rahmenfarbe verwendet.
   

ctx.fillStyle = "red";
ctx.strokeStyle = "blue";

lineWidth
4. lineWidth-Eigenschaft wird verwendet, um die Breite der Linie in Pixel festzulegen.
   

ctx.lineWidth = 2;

lineCap
5. Die lineCap-Eigenschaft wird verwendet, um den Stil des Linienendes festzulegen. Es gibt drei Werte: butt (Standardwert, gerades Ende), Round (abgerundetes Ende) und Square (quadratisches Ende). ).
   

ctx.lineCap = "round";

lineJoin
6. lineJoin-Eigenschaft wird verwendet, um den Eckenstil festzulegen, wenn sich zwei Linien schneiden. Es gibt drei Werte: rund (runde Ecke), abgeschrägt (abgeschrägte Ecke) und Gehrung (spitze Ecke).
   

ctx.lineJoin = "bevel";

globalAlpha
7. globalAlpha-Eigenschaft wird verwendet, um die Transparenz der Zeichnung festzulegen, mit einem Wert im Bereich von 0 bis 1.
   

ctx.globalAlpha = 0.5;

globalCompositeOperation
8. globalCompositeOperation-Eigenschaft wird verwendet, um den Zeichnungsüberblendungsmodus festzulegen, der steuern kann, wie sich neu gezeichnete Grafiken mit vorhandenen Grafiken überlappen.
   

ctx.globalCompositeOperation = "source-over";

font
9. Die Schriftarteigenschaft wird verwendet, um den Schriftstil beim Zeichnen von Text festzulegen.
   

ctx.font = "20px Arial";

textAlign und textBaseline
10. textAlign werden zum Festlegen der Textausrichtung verwendet. Es gibt drei Werte: start (Standardwert, Text ist linksbündig), end (Text ist rechtsbündig) und center (Text ist zentriert) Ausrichtung).
    Das textBaseline-Attribut wird verwendet, um die Position der Textgrundlinie festzulegen. Es gibt sechs Werte: oben, hängend (hängende Grundlinie), mittel, alphabetisch (Standardgrundlinie), ideografisch (ideografische Grundlinie) und unten.
    

ctx.textAlign = "center";
ctx.textBaseline = "middle";

shadowBlur undshadowColor
11. shadowBlur-Eigenschaft wird verwendet, um die Unschärfe des Schattens in Pixeln festzulegen; die ShadowColor-Eigenschaft wird verwendet, um die Farbe des Schattens festzulegen.
    

ctx.shadowBlur = 10;
ctx.shadowColor = "black";

createLinearGradient() und createRadialGradient()
12. createLinearGradient()-Methode wird verwendet, um ein Verlaufsobjekt mit einem linearen Verlaufseffekt zu erstellen; die Methode createRadialGradient() wird verwendet, um ein Verlaufsobjekt mit einem radialen Verlaufseffekt zu erstellen Wirkung.
    

var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;

createPattern()
13. createPattern()-Methode wird verwendet, um Endlosschleifen-Kachelmuster wie Bilder, Videos oder Text zu erstellen.
    

var img = new Image();
img.src = "pattern.png";
img.onload = function () {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
};

save() und restart()
14. save() werden verwendet, um den aktuellen Zustand der Leinwand zu speichern, einschließlich aller Attribute und Transformationen; die Methode „restore()“ wird verwendet, um den vorherigen wiederherzustellen Zustand der Leinwand.
    

ctx.save();
// 进行一系列绘图操作
ctx.restore();

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung und Verwendungsanleitung des Canvas-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!