Comentario: Este artículo presentará los efectos de texto de lienzo HTML5 en detalle. Según el lienzo, cómo lograr el relleno de textura y el accidente cerebrovascular, el llenado de color y el trazo, el código específico es el siguiente. Los amigos interesados pueden referirse a él. Espero que sea útil para todos.
Demuestre los efectos de texto de lona HTML5 y texto de trazo, en función de cómo el lienzo implementa el llenado de texturas y el accidente cerebrovascular.1: Relleno de color y trazo
El relleno de color se puede lograr a través del estilo relleno, y el color del trazo se puede lograr a través de Strokestyle. Ejemplo simple
como sigue:
// Texto de relleno y trazo
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'verde';
ctx.StroketeText ('¡Hola mundo!', 20, 100);
ctx.fillstyle = 'rojo';
ctx.FillText ('¡Hola mundo!', 20, 100);
Dos: relleno de textura y trazo
El lienzo HTML5 también admite el llenado de textura. Al cargar una imagen de textura y luego crear un patrón de pincel, la API para crear patrones de textura es CTX.CreatePattern (imageTexture, repite); El segundo parámetro admite cuatro valores, a saber, repetir-x, repetir y, repetir, no repetir, lo que significa que la textura se repite o no se repite a lo largo del eje x, el eje y direcciones respectivamente. El código para los trazos y los rellenos de textura es el siguiente:
var woodfill = ctx.createPattern (imageTexture, "repetir");
ctx.Strokestyle = Woodfill;
CTX.StroketeText ('¡Hola Mundo!', 20, 200);
// llenar rectángulo
ctx.fillstyle = Woodfill;
ctx.fillrect (60, 240, 260, 440);
Imagen de textura:
Tres: efecto de operación
Código:
<! 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> Demo de texto de relleno y trazo de lienzo </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;
}
// Obtener un contexto 2D de lienzo y dibujar rectangel
ctx = canvas.getContext ("2d");
ctx.fillstyle = "negro";
ctx.fillrect (0, 0, Canvas.Width, Canvas.Height);
// Texto de relleno y trazo
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'verde';
ctx.StroketeText ('¡Hola mundo!', 20, 100);
ctx.fillstyle = 'rojo';
ctx.FillText ('¡Hola mundo!', 20, 100);
// llenar y trazar por patrón
imageTexture = document.createElement ('img');
imagetexture.src = "../pattern.png";
ImageTexture.Onload = Loaded ();
}
función cargada () {
// retraso a la imagen cargada
setTimeOut (TextureSfill, 1000/30);
}
función textureFill () {
// var woodfill = ctx.createPattern (imageTexture, "repetir-x");
// var woodfill = ctx.createPattern (imageTexture, "repetir-y");
// var woodfill = ctx.createPattern (imageTexture, "no repal");
var woodfill = ctx.createPattern (imageTexture, "repetir");
ctx.Strokestyle = Woodfill;
CTX.StroketeText ('¡Hola Mundo!', 20, 200);
// llenar rectángulo
ctx.fillstyle = Woodfill;
ctx.fillrect (60, 240, 260, 440);
}
</script>
</ablo>
<Body>
<h1> Demostración de texto de lona HTML5 - por pescado sombrío </h1>
<pre> relleno y trazo </pre>
<div>
<Canvas> </Canvas>
</div>
</body>
</html>