Comentário: A Canvas HTML5 fornece quatro valores de atributo para definir sombras para realizar o texto da sombra, o efeito de tração de sombra 3D e o texto do efeito de borrão de borda. O código de demonstração específico é o seguinte. Amigos que querem aprender podem se referir a ele.
A tela HTML5 fornece quatro valores de atributo para definir sombras:context.shadowcolor = vermelho significa definir a cor da sombra como vermelha
context.shadowoffsetx = 0 indica a distância horizontal da sombra em relação ao texto, 0 indica as posições horizontais dos dois sobrepostos
context.shadowoffsety = 0 indica a distância vertical da sombra em relação ao texto, 0 indica as posições verticais dos dois sobrepostos
context.shadowblur = 10 Efeito do desfoque de sombra, quanto maior o valor, mais desfoque ele.
Um dos códigos de retângulo sombreado mais simples é o seguinte:
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);
Os efeitos são os seguintes:
Texto das sombras:
Basta definir os valores de ShadofOffsetX e ShadofOffsety, quando ambos os valores são positivos, a sombra é relativa ao canto inferior direito do texto.
Offset quadrado. Quando todos os valores são negativos, a sombra é compensada do lado esquerdo superior do texto.
Efeito de puxão de sombra 3D:
Repita o texto para desenhar repetidamente na mesma posição e altere Shadowoffsetx, ShadoffOffsety, Shadowblur
O valor de, que está constantemente mudando de pequeno para grande, e sua transparência continua a aumentar. Então eu recebi o texto do efeito das sombras.
Efeito de borda de borda Texto:
Repita em quatro direções com base no efeito de tração da sombra 3D, e o efeito do texto das penas de borda é obtido.
Efeito de corrida:
Código de sequência:
<! Doctype html>
<html>
<head>
<meta http-equiv = "x-ua compatível com" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Demonstração de clipe de tela </title>
<link href = "default.css" />
<Cript>
var ctx = null; // contexto 2D variável global
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 não suportadas. Instale um navegador compatível com HTML5.");
retornar;
}
var context = Canvas.getContext ('2D');
// Seção um - Shadow and Blur
context.fillstyle = "preto";
context.fillRect (0, 0, Canvas.Width, Canvas.Height/4);
context.font = '60pt calibri';
context.shadowcolor = "branco";
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);
// Seção dois - Sombra Fonte
var hh = Canvas.Height/4;
context.fillstyle = "branco";
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);
// Seção três - Efeito de sombra Down
var hh = canvas.Height/4 + hh;
context.fillstyle = "preto";
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);
}
// Seção quatro - Efeito desbotado
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>
</head>
<Body>
<h1> HTML5 CLIP Demo - por peixes sombrios </h1>
<pre> preencher e acariciar clipe </pre>
<div>
<lVAs> </canvas>
</div>
</body>
</html>