Comentário: Este artigo introduzirá os efeitos de texto de text de tela HTML5 preencher e acaricia em detalhes. Com base na tela, como alcançar o preenchimento e o acidente vascular cerebral, o preenchimento de cores e o AVC, o código específico é o seguinte. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Demonstre a tela HTML5 preenche e acaricia os efeitos do texto, com base em como o Canvas implementa o preenchimento e o AVC.1: Preenchimento de cores e derrame
O enchimento de cores pode ser alcançado através do estilo de enchimento, e a cor do traço pode ser alcançada através do Strokestyle. Exemplo simples
do seguinte modo:
// encher e atirar o texto
ctx.font = '60pt calibri';
ctx.LineWidth = 3;
ctx.strokestyle = 'verde';
ctx.strokeText ('Hello World!', 20, 100);
ctx.fillstyle = 'vermelho';
ctx.FillText ('Hello World!', 20, 100);
Dois: preenchimento de textura e derrame
A tela HTML5 também suporta o preenchimento de textura. Ao carregar uma imagem de textura e, em seguida, criar um padrão de pincel, a API para criar padrões de textura é ctx.createpattern (imageTexture, repetir); O segundo parâmetro suporta quatro valores, ou seja, repetir-x, repetir-y, repetir, sem repetir, o que significa que a textura é repetida ou não repetida ao longo das direções do eixo x, y e XY, respectivamente. O código para golpes e preenchimentos de textura é o seguinte:
var woodfill = ctx.createpattern (imageTexture, "repetir");
ctx.strokestyle = preenchimento de madeira;
ctx.stroketext ('Hello World!', 20, 200);
// Preencha o retângulo
ctx.FillStyle = Woodfill;
ctx.FillRect (60, 240, 260, 440);
Imagem de textura:
Três: efeito de operação
Código:
<! 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> Canvas preenche e acaricia uma demonstração de texto </ititle>
<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;
}
// Obtenha o contexto 2D da tela e desenhe retangel
ctx = Canvas.getContext ("2D");
ctx.fillstyle = "preto";
ctx.fillRect (0, 0, Canvas.Width, Canvas.Height);
// encher e atirar o texto
ctx.font = '60pt calibri';
ctx.LineWidth = 3;
ctx.strokestyle = 'verde';
ctx.strokeText ('Hello World!', 20, 100);
ctx.fillstyle = 'vermelho';
ctx.FillText ('Hello World!', 20, 100);
// preencher e acariciar por padrão
imageTexture = document.createElement ('img');
imageTexture.src = "../pattern.png";
imageTexture.onload = carregado ();
}
função carregada () {
// atraso na imagem carregada
setTimeout (texturefill, 1000/30);
}
função texturefill () {
// var woodfill = ctx.createpattern (imageTexture, "repetição-x");
// var woodfill = ctx.createpattern (imageTexture, "repetição-y");
// var woodfill = ctx.createpattern (imageTexture, "sem repetição");
var woodfill = ctx.createpattern (imageTexture, "repetir");
ctx.strokestyle = preenchimento de madeira;
ctx.stroketext ('Hello World!', 20, 200);
// Preencha o retângulo
ctx.FillStyle = Woodfill;
ctx.FillRect (60, 240, 260, 440);
}
</script>
</head>
<Body>
<h1> html5 text demo de text - por peixes sombrios </h1>
<pre> preencher e acaricie </pre>
<div>
<lVAs> </canvas>
</div>
</body>
</html>