Beispieldemonstration zur Verwendung von HTML5 Canvas. Shadow_html5-Tutorial-Fähigkeiten

HTML5 Canvas bietet vier Attributwerte zum Festlegen von Schatten:
context.shadowColor = „red“ bedeutet, dass die Schattenfarbe auf Rot gesetzt wird.
context.shadowOffsetX = 0 bedeutet den horizontalen Abstand des Schattens relativ zu TEXT, 0 bedeutet zwei Die horizontale Position überlappt
context.shadowOffsetY = 0 bedeutet den vertikalen Abstand des Schattens relativ zum TEXT, 0 bedeutet, dass die vertikale Position der beiden übereinstimmt
context.shadowBlur = 10 Schattenunschärfeeffekt, je größer der Wert, desto stärker ist die Unschärfe.
Der einfachste Rechteckcode mit Schatten lautet wie folgt:
context.shadowColor = "RGBA(127,127,127,1)";
context.shadowOffsetY = 3; context.shadowBlur = 0;
context.fillStyle = "RGBA(0, 0, 0,8)";
context.fillRect(10, hh 10, 200,canvas.height/4-20)
Der Effekt ist wie folgt:


Schattentext:
Stellen Sie einfach die Werte von ShadowOffsetX und ShadowOffsetY ein, wenn beide Werte positiv sind , der Schatten wird relativ zur unteren rechten Ecke des Textes Quadratversatz sein. Wenn alle Werte negativ sind, wird der Schatten relativ zur oberen linken Ecke des Textes versetzt.

3D-Schatteneffekt:
Zeichnen Sie wiederholt Text an derselben Position und ändern Sie dabei die Werte von ShadowOffsetX, ShadowOffsetY und ShadowBlur. Von klein nach groß nimmt der Versatz weiter zu , und auch die Transparenz nimmt weiter zu. Sie erhalten den Schatteneffekttext.

Text mit Kantenunschärfeeffekt:
Wiederholen Sie diesen Vorgang basierend auf dem 3D-Schatteneffekt in vier Richtungen, um den Kantenverlaufseffekt für den Text zu erhalten. Laufeffekt:


Sequenzcode:

Code kopieren Der Code ist wie folgt:

<script> <br>var ctx = nul; // variable globale contexte 2D <br>var imageTexture = null; <br>window.onload = function() { <br>var canvas = document.getElementById("text_canvas"); <br>console.log(canvas.parentNode.clientWidth); <br>canvas.width = canvas.parentNode.clientWidth; <br>canvas.height = canvas.parentNode.clientHeight; <br>if (!canvas.getContext) { <br>console.log("Canvas non pris en charge. Veuillez installer un navigateur compatible HTML5."); <br>retour ; <br>} <br>var context = canvas.getContext('2d'); <br>// première section - ombre et flou <br>context.fillStyle="black"; <br>context.fillRect(0, 0, canvas.width, canvas.height/4); <br>context.font = '60pt Calibri'; <br>context.shadowColor = "blanc"; <br>context.shadowOffsetX = 0; <br>context.shadowOffsetY = 0; <br>context.shadowBlur = 20 ; <br>context.fillText("Blur Canvas", 40, 80); <br>context.StrokeStyle = "RGBA(0, 255, 0, 1)"; <br>context.lineWidth = 2; <br>context.StrokeText("Blur Canvas", 40, 80); <br>// section deux - police d'ombre <br>var hh = canvas.height/4; <br>context.fillStyle="blanc"; <br>context.fillRect(0, hh, canvas.width, canvas.height/4); <br>context.font = '60pt Calibri'; <br>context.shadowColor = "RGBA(127,127,127,1)"; <br>context.shadowOffsetX = 3; <br>context.shadowOffsetY = 3; <br>context.shadowBlur = 0; <br>context.fillStyle = "RGBA(0, 0, 0, 0.8)"; <br>context.fillText("Blur Canvas", 40, 80 hh); <br>// section trois - effet d'ombre vers le bas <br>var hh = canvas.height/4 hh; <br>context.fillStyle="noir"; <br>context.fillRect(0, hh, canvas.width, canvas.height/4); <br>for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")" ; <br />context.shadowOffsetX = i*2; <br />context.shadowOffsetY = i*2; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Blur Canvas", 40, 80 hh); <br />} <br />// section quatre - effet de fondu <br />var hh = canvas.height/4 hh; <br />context.fillStyle="vert"; <br />context.fillRect(0, hh, canvas.width, canvas.height/4); <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")" ; <br />context.shadowOffsetX = 0; <br />context.shadowOffsetY = -i*2; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Blur Canvas", 40, 80 hh); <br />} <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")"; <br />context.shadowOffsetX = 0; <br />context.shadowOffsetY = i*2; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Blur Canvas", 40, 80 hh); <br />} <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")"; <br />context.shadowOffsetX = i*2; <br />context.shadowOffsetY = 0; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Blur Canvas", 40, 80 hh); <br />} <br />for(var i = 0; i < 10; i ) <br />{ <br />context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")"; <br />context.shadowOffsetX = -i*2; <br />context.shadowOffsetY = 0; <br />context.shadowBlur = i*2; <br />context.fillStyle = "RGBA(127, 127, 127, 1)"; <br />context.fillText("Blur Canvas", 40, 80 hh); <br />} <br />} <br /></script>

Démo de clip sur toile HTML5 - Par Gloomy Fish

 Clip de remplissage et de contour