Kommentar: In diesem Artikel werden die HTML5 -Leinwand -Füll- und Schlaganfallteffekte im Detail vorgestellt. Basierend auf Canvas, der Erreichung von Texturfüllung und Hub, Farbfüllung und Schlaganfall ist der spezifische Code wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Demonstrieren Sie die Effekte von HTML5 -Canvas -Füll- und Schlaganfall -Text -Effekten, basierend darauf, wie Canvas Texturfüllung und Schlaganfall implementieren.1: Farbfüllung und Schlaganfall
Die Farbfüllung kann durch Fillstyle erreicht werden, und die Schlaganfallfarbe kann durch Strokestyle erreicht werden. Einfaches Beispiel
wie folgt:
// Text füllen und streicheln
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'grün';
ctx.stroketext ('Hello World!', 20, 100);
Ctx.FillStyle = 'rot';
Ctx.Filltext ('Hello World!', 20, 100);
Zwei: Texturfüllung und Schlaganfall
HTML5 -Leinwand unterstützt auch die Füllung der Textur. Durch das Laden eines Texturbildes und beim Erstellen eines Pinselmusters ist die API zum Erstellen von Texturmustern ctx.createPattrenn (ImagETexture, Wiederholung). Der zweite Parameter unterstützt vier Werte, nämlich wiederholt-X, Wiederholung, Wiederholung, No-Repeat, was bedeutet, dass die Textur entlang der Richtungen der X-Achse, der Y-Achse und des XY wiederholt oder nicht wiederholt wird. Der Code für Texturschläge und Füllungen lautet wie folgt:
var Woodfill = ctx.CreatePatters (ImagETexture, "Wiederholung");
ctx.strokestyle = Woodfill;
ctx.stroketext ('Hello World!', 20, 200);
// Rechteck füllen
Ctx.FillStyle = WoodFill;
Ctx.FillRect (60, 240, 260, 440);
Texturbild:
Drei: Betriebseffekt
Code:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "x-ua-kompatible" content = "chrome = ie8">
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<title> Canvas -Füll- und Strichtext -Demo </title>
<link href = "default.css" />
<Script>
var ctx = null; // Globale variable 2D -Kontext
var imagetexture = null;
window.onload = function () {
var canvas = document.getElementById ("text_canvas");
console.log (canvas.parentnode.clientwidth);
canvas.width = canvas.parentnode.clientwidth;
canvas.height = canvas.parentnode.clientHeight;
if (! canvas.getContext) {
console.log ("Canvas nicht unterstützt. Bitte installieren Sie einen HTML5 -kompatiblen Browser.");
zurückkehren;
}
// Erhalten Sie 2D -Kontext von Leinwand und zeichnen Sie Rechteschel
ctx = canvas.getContext ("2d");
Ctx.FillStyle = "Black";
Ctx.FillRect (0, 0, Canvas.width, canvas.height);
// Text füllen und streicheln
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'grün';
ctx.stroketext ('Hello World!', 20, 100);
Ctx.FillStyle = 'rot';
Ctx.Filltext ('Hello World!', 20, 100);
// Füllen und streicheln Sie nach Muster
ImagETexture = document.createelement ('img');
ImagETexture.src = "../Pattern.png";
ImagETeXTure.onload = loaded ();
}
Funktion geladen () {
// Verzögerung auf das Bild geladen
setTimeout (textureFill, 1000/30);
}
Funktion textureFill () {
// var Woodfill = ctx.CreatePattreN (ImagETexture, "repep-x");
// var Woodfill = ctx.CreatePattreN (ImagETexture, "repeat-y");
// var Woodfill = ctx.CreatePattreN (ImagETexture, "No-Repeat");
var Woodfill = ctx.CreatePatters (ImagETexture, "Wiederholung");
ctx.strokestyle = Woodfill;
ctx.stroketext ('Hello World!', 20, 200);
// Rechteck füllen
Ctx.FillStyle = WoodFill;
Ctx.FillRect (60, 240, 260, 440);
}
</script>
</head>
<body>
<h1> html5 Canvas Text Demo - von düsterer Fisch </h1>
<Pre> Fill und Stroke </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>