Comentario: Este artículo presenta principalmente ejemplos de HTML5 que se implementa el efecto de sombra de lienzo
Implementar el efecto de sombra de lienzo en HTML5
<! Doctype html>
<html>
<Evista>
<meta http-oquiv = "x-ua-compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Canvas Clip Demo </title>
<link href = "default.css" />
<script>
var ctx = null; // Contexto 2D variable global
var imageteTexture = 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 ("lienzo no es compatible. Instale un navegador compatible HTML5");
devolver;
}
var context = Canvas.getContext ('2d');
// Sección uno - Sombra y desenfoque
context.fillstyle = "negro";
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);
// Sección dos - Font de sombra
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);
// Sección tres - Efecto de sombra Down
var hh = Canvas.Height/4 + HH;
context.fillstyle = "negro";
context.fillrect (0, HH, Canvas.Width, Canvas.Height/4);
para (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);
}
// Sección cuatro - Efecto de desvanecimiento
var hh = Canvas.Height/4 + HH;
context.fillstyle = "verde";
context.fillrect (0, HH, Canvas.Width, Canvas.Height/4);
para (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);
}
para (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);
}
para (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);
}
para (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>
</ablo>
<Body>
<h1> html5 lienzo </h1>
<pre> clip de relleno y trazo </pre>
<div>
<Canvas> </Canvas>
</div>
</body>
</html>