Commentaire: Cet article présentera en détail les effets de remplissage de toile HTML5 de remplissage et de course. Sur la base de la toile, comment réaliser le remplissage de la texture et les accidents vasculaires cérébraux, le remplissage des couleurs et la course, le code spécifique est le suivant. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
Démontrez les effets de texte de remplissage et de trait sur le canevas HTML5, en fonction de la façon dont les toiles implémentent le remplissage de la texture et les accidents vasculaires cérébraux.1: remplissage de couleurs et coup
Le remplissage des couleurs peut être réalisé grâce à un style de remplissage, et les couleurs de l'AVC peuvent être obtenues grâce à StrokeSetyle. Exemple simple
comme suit:
// Texte de remplissage et de course
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'green';
ctx.stroketext («Hello World!», 20, 100);
ctx.fillStyle = 'Red';
CTX.FillText («Hello World!», 20, 100);
Deux: remplissage de texture et course
HTML5 Canvas prend également en charge le remplissage de texture. En chargeant une image de texture puis en créant un motif de pinceau, l'API pour créer des motifs de texture est CTX.CreatePattern (ImageTexture, répéter); Le deuxième paramètre prend en charge quatre valeurs, à savoir répéter-x, répéter-y, répéter, non-répétition, ce qui signifie que la texture est répétée ou non répétée le long des directions de l'axe x, de l'axe y et XY respectivement. Le code pour les traits de texture est le suivant:
var woodfill = ctx.createpattern (imageTexture, "répéter");
ctx.strokestyle = woodfill;
ctx.stroketext («Hello World!», 20, 200);
// Remplissez le rectangle
ctx.filstyle = woodfill;
CTX.Fillrect (60, 240, 260, 440);
Image de texture:
Trois: Effet de fonctionnement
Code:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "x-ua compatible" content = "chrome = ie8">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Canvas Remplissage et tronçon de texte Demo </TITAL>
<link href = "default.css" />
<cript>
var ctx = null; // Contexte 2D variable globale
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 non pris en charge. Veuillez installer un navigateur compatible HTML5.");
retour;
}
// Obtenez un contexte 2D de toile et dessinez du rectange
ctx = canvas.getContext ("2d");
ctx.fillStyle = "noir";
ctx.fillrect (0, 0, canvas.width, canvas.height);
// Texte de remplissage et de course
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'green';
ctx.stroketext («Hello World!», 20, 100);
ctx.fillStyle = 'Red';
CTX.FillText («Hello World!», 20, 100);
// remplit et frappe par motif
iMMIETExture = document.CreateElement ('IMG');
iMMIETexture.src = "../pattern.png";
iMageStExture.Onload = chargé ();
}
fonction chargée () {
// retard à l'image chargée
setTimeout (TextureFill, 1000/30);
}
fonction texturefill () {
// var woodfill = ctx.createpattern (ImageTexture, "repeat-x");
// var woodfill = ctx.createpattern (ImageTexture, "répéter-y");
// var woodfill = ctx.createpattern (ImageTexture, "No-Repeat");
var woodfill = ctx.createpattern (imageTexture, "répéter");
ctx.strokestyle = woodfill;
ctx.stroketext («Hello World!», 20, 200);
// Remplissez le rectangle
ctx.filstyle = woodfill;
CTX.Fillrect (60, 240, 260, 440);
}
</cript>
</ head>
<body>
<h1> Demo texte de toile HTML5 - par sombre poisson </h1>
<pre> Remplir et tracer </pre>
<div>
<lebvas> </ canvas>
</div>
</docy>
</html>