Commentaire: Cet article présente principalement des exemples de HTML5 que l'effet d'ombre sur toile est mis en œuvre
Implémentez l'effet ombre du canevas dans HTML5
<! 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> HTML5 Canvas </H1>
<pre> Clip de remplissage et de trait </pre>
<div>
<lebvas> </ canvas>
</div>
</docy>
</html>