Kommentar: In diesem Artikel wird hauptsächlich Beispiele für HTML5 vorgestellt, dass der Canvas -Schatteneffekt implementiert ist
Implementieren Sie den Canvas -Schatteneffekt in HTML5
<! 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 </h1>
<Pre> Füllung und Schlaganfall Clip </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>