Comentario: el lienzo HTML5 proporciona cuatro valores de atributos para configurar sombras para realizar el texto de sombra, el efecto de extracción de sombras 3D y el texto del efecto borde de borde. El código de demostración específico es el siguiente. Los amigos que quieran aprender pueden referirse a él.
El lienzo HTML5 proporciona cuatro valores de atributos para configurar sombras:context.shadowcolor = rojo significa configurar el color de la sombra en rojo
context.shadowoffsetx = 0 indica la distancia horizontal de la sombra en relación con el texto, 0 indica las posiciones horizontales de las dos superposiciones
context.shadowoffsety = 0 indica la distancia vertical de la sombra en relación con el texto, 0 indica las posiciones verticales de las dos superposición
context.shadowblur = 10 Shadow Blow Effect, cuanto mayor sea el valor, más desenfoque es.
Uno de los códigos de rectángulo sombreados más simples es el siguiente:
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);
Los efectos son los siguientes:
Texto de la sombra:
Simplemente establezca los valores de ShadowOffSetX y ShadowOffsety, cuando ambos valores son positivos, la sombra es relativa a la parte inferior derecha del texto.
desplazamiento cuadrado. Cuando todos los valores son negativos, la sombra se compensa desde el lado superior izquierdo del texto.
Efecto de tracción de sombra 3D:
Repita el texto para dibujar repetidamente en la misma posición y cambiar ShadowOffsetx, ShadowOffsety, Shadowblur
El valor de, que está constantemente cambiando de pequeño a grande, y su transparencia continúa aumentando. Luego obtuve el texto del efecto de sombra.
Texto del efecto de borde de borde:
Repita en cuatro direcciones basadas en el efecto de extracción de sombra 3D, y se obtiene el efecto de texto de la pluma de borde.
Efecto de ejecución:
Código de secuencia:
<! 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 Demo de clip de lona - por pescado sombrío </h1>
<pre> clip de relleno y trazo </pre>
<div>
<Canvas> </Canvas>
</div>
</body>
</html>