Commentaire: Le canevas HTML5 fournit quatre valeurs d'attribut pour définir les ombres pour réaliser le texte de l'ombre, l'effet d'ombre 3D et le texte de l'effet de flou de bord. Le code de démonstration spécifique est le suivant. Les amis qui veulent apprendre peuvent y faire référence.
Le canevas HTML5 fournit quatre valeurs d'attribut pour le réglage des ombres:context.shadowcolor = rouge signifie régler la couleur de l'ombre sur le rouge
context.shadowoffsetx = 0 indique la distance horizontale de l'ombre par rapport au texte, 0 indique les positions horizontales des deux chevauchement
context.shadowoffsety = 0 indique la distance verticale de l'ombre par rapport au texte, 0 indique les positions verticales des deux chevauchement
context.shadowblur = 10 effets de flou d'ombre, plus la valeur est grande, plus elle est floue.
L'un des codes rectangulaires les plus simples est le suivant:
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);
Les effets sont les suivants:
Texte de l'ombre:
Définissez simplement les valeurs de ShadowOffSetx et ShadowOffSety, lorsque les deux valeurs sont positives, l'ombre est relative à la droite inférieure du texte.
décalage carré. Lorsque toutes les valeurs sont négatives, l'ombre est décalée de la partie supérieure gauche du texte.
Effet de traction de l'ombre 3D:
Répétez le texte pour dessiner à plusieurs reprises à la même position et changer ShadowOffsetX, ShadowOffsety, ShadowBlur
La valeur de, qui passe constamment de petite à grande, et sa transparence continue d'augmenter. Ensuite, j'ai eu le texte de l'effet d'ombre.
Texte de l'effet de flou de bord:
Répétez dans quatre directions en fonction de l'effet d'attraction de l'ombre 3D, et l'effet texte de la plume de bord est obtenu.
Effet de course:
Code de séquence:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "x-ua compatible" content = "chrome = ie8">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Canvas Clip Demo </Title>
<link href = "default.css" />
<cript>
var ctx = null; // Contexte 2D variable globale
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 non pris en charge. Veuillez installer un navigateur compatible HTML5.");
retour;
}
var context = canvas.getContext ('2d');
// Section One - Shadow and Blur
context.fillStyle = "Black";
context.fillrect (0, 0, canvas.width, canvas.height / 4);
context.font = '60pt calibri';
context.shadowcolor = "blanc";
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);
// Section deux - Font Shadow
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);
// Section trois - Effet de l'ombre en bas
var hh = canvas.height / 4 + hh;
context.fillStyle = "Black";
context.fillrect (0, hh, canvas.width, canvas.height / 4);
pour (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);
}
// Section quatre - Effet de fondu
var hh = canvas.height / 4 + hh;
context.fillStyle = "Green";
context.fillrect (0, hh, canvas.width, canvas.height / 4);
pour (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);
}
pour (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);
}
pour (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);
}
pour (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);
}
}
</cript>
</ head>
<body>
<h1> Démo Clip en toile HTML5 - par sombre poisson </h1>
<pre> Clip de remplissage et de trait </pre>
<div>
<lebvas> </ canvas>
</div>
</docy>
</html>