Kommentar: HTML5 -Canvas bietet vier Attributwerte für das Einstellen von Schatten, um Schattentext, 3D -Schatten -Pull -Effekt und Edge Blur -Effekt -Text zu realisieren. Der spezifische Demonstrationscode lautet wie folgt. Freunde, die lernen wollen, können sich darauf beziehen.
HTML5 -Canvas bietet vier Attributwerte für das Festlegen von Schatten:context.shadowColor = rot bedeutet, die Schattenfarbe auf Rot zu setzen
context.shadowOffsetX = 0 zeigt den horizontalen Abstand des Schattens relativ zum Text an, 0 gibt die horizontalen Positionen der beiden Überlappungen an
context.shadowoffsety = 0 zeigt den vertikalen Abstand des Schattens relativ zum Text an, 0 gibt die vertikalen Positionen der beiden Überlappungen an
context.shadowblur = 10 Schattenschwärmereffekt, je größer der Wert, desto mehr Unschärfe ist er.
Eines der einfachsten schattendichten Rechteckcodes ist wie folgt:
context.shadowcolor = rgba (127,127,127,1);
context.shadowOffsetX = 3;
context.shadowOffsety = 3;
context.shadowblur = 0;
context.fillStyle = rgba (0, 0, 0, 0,8);
Context.FillRect (10, HH+10, 200, Canvas.Height/4-20);
Die Effekte sind wie folgt:
Schattentext:
Legen Sie einfach die Werte von ShadowOffsetX und ShadowOffsety fest, wenn beide Werte positiv sind, ist der Schatten relativ zum unteren rechts des Textes.
Quadratversatz. Wenn alle Werte negativ sind, wird der Schatten von der oberen linken Seite des Textes aus versetzt.
3D -Schatten -Pulling -Effekt:
Wiederholen Sie den Text, um wiederholt an derselben Position zu zeichnen und ShadowOffsetX, Shadowoffsety, Shadowblur zu ändern
Der Wert von, der sich ständig von klein nach groß verlagert, und seine Transparenz nimmt weiter zu. Dann bekam ich den Schatteneffekttext.
Edge Blur Effect Text:
Wiederholen Sie in vier Richtungen basierend auf dem 3D -Schatten -Pull -Effekt, und der Textwirkung der Kantenfederung wird erhalten.
Laufeffekt:
Sequenzcode:
<! 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 clip 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;
}
var context = canvas.getContext ('2d');
// Abschnitt 1 - Schatten und Unschärfe
context.fillStyle = "schwarz";
context.FillRect (0, 0, canvas.width, canvas.height/4);
context.font = '60pt calibri';
context.shadowColor = "White";
context.shadowOffsetX = 0;
context.shadowOffsety = 0;
context.shadowblur = 20;
context.FillText ("Blur Canvas", 40, 80);
context.strokestyle = "rgba (0, 255, 0, 1)";
context.linewidth = 2;
context.stroketext ("Blur Canvas", 40, 80);
// Abschnitt zwei - Schattenschrift
var hh = canvas.height/4;
context.FillStyle = "White";
context.FillRect (0, HH, canvas.width, canvas.height/4);
context.font = '60pt calibri';
context.shadowcolor = "RGBA (127,127,127,1)";
context.shadowOffsetX = 3;
context.shadowOffsety = 3;
context.shadowblur = 0;
context.fillStyle = "rgba (0, 0, 0, 0,8)";
context.FillText ("Blur Canvas", 40, 80+HH);
// Abschnitt drei - Down Shadow -Effekt
var hh = canvas.height/4 + hh;
context.fillStyle = "schwarz";
context.FillRect (0, HH, canvas.width, canvas.height/4);
für (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowOffsetX = i*2;
context.shadowoffsety = i*2;
context.shadowblur = i*2;
context.fillStyle = "RGBA (127, 127, 127, 1)";
context.FillText ("Blur Canvas", 40, 80+HH);
}
// Abschnitt vier - Fade -Effekt
var hh = canvas.height/4 + hh;
context.fillstyle = "green";
context.FillRect (0, HH, canvas.width, canvas.height/4);
für (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowOffsetX = 0;
context.shadowOffsety = -i*2;
context.shadowblur = i*2;
context.fillStyle = "RGBA (127, 127, 127, 1)";
context.FillText ("Blur Canvas", 40, 80+HH);
}
für (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowOffsetX = 0;
context.shadowoffsety = i*2;
context.shadowblur = i*2;
context.fillStyle = "RGBA (127, 127, 127, 1)";
context.FillText ("Blur Canvas", 40, 80+HH);
}
für (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowOffsetX = i*2;
context.shadowOffsety = 0;
context.shadowblur = i*2;
context.fillStyle = "RGBA (127, 127, 127, 1)";
context.FillText ("Blur Canvas", 40, 80+HH);
}
für (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowOffsetX = -i*2;
context.shadowOffsety = 0;
context.shadowblur = i*2;
context.fillStyle = "RGBA (127, 127, 127, 1)";
context.FillText ("Blur Canvas", 40, 80+HH);
}
}
</script>
</head>
<body>
<h1> html5 canvas clip Demo - von düsterer Fisch </h1>
<Pre> Füllung und Schlaganfall Clip </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>