Comment implémenter le remplissage et le contour de texture (Fill And Stroke) dans les compétences du didacticiel HTML5 Canvas_html5

Montre les effets de texte HTML5 Canvas Fill et Stroke, et comment implémenter le remplissage de texture et le contour basés sur Canvas.

1 : Remplissage de couleur et trait
Le remplissage de couleur peut être obtenu via fillStyle, et la couleur du trait peut être obtenue via StrokeStyle. Un exemple simple
est le suivant :

Copier le code

Le code est le suivant :

// remplir et contourner le texte
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
ctx.StrokeStyle = 'green'
ctx.StrokeText(' Bonjour tout le monde !', 20 , 100);
ctx.fillStyle = 'red';
ctx.fillText('Bonjour tout le monde !', 20, 100); >2 : Remplissage de texture et contour

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 un motif de texture est ctx.createPattern(imageTexture, "repeat"). ; le deuxième paramètre prend en charge quatre Les valeurs sont "repeat-x", "repeat-y", "repeat" et "no-repeat", ce qui signifie que la texture se répète ou ne se répète pas le long de l'axe X, Axe Y et direction XY respectivement. Le code pour le contour et le remplissage de la texture est le suivant :



Copiez le code

Le code est le suivant : var woodfill = ctx.createPattern(imageTexture,"repeat");

ctx.StrokeStyle = woodfill;

ctx.StrokeText('Bonjour tout le monde !', 20, 200); // remplir le rectangle

ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440);


Image texturée :

Trois : Effet d'exécution


Code :


Copier le code

Le code est le suivant :

Compatible" content="chrome=IE8" >

<script> <br>var imageTexture = null; <br>window.onload = function() { <br>var canvas = document.getElementById("text_canvas"); <br>console.log(canvas.parentNode.clientWidth); >canvas.width = canvas.parentNode. clientWidth; <br>canvas.height = canvas.parentNode.clientHeight; <br>if (!canvas.getContext) { <br>console.log("Canvas non pris en charge. Veuillez installer un Navigateur compatible HTML5."); <br>return; <br>} <br>// obtenir le contexte 2D du canevas et dessiner un rectangle <br>ctx = canvas.getContext("2d"); <br>ctx.fillStyle= "black"; <br>ctx. fillRect(0, 0, canvas.width, canvas.height); <br>// remplissage et contour du texte <br>ctx.font = '60pt Calibri'; lineWidth = 3; <br>ctx. StrokeStyle = 'green'; <br>ctx.StrokeText('Bonjour tout le monde !', 20, 100>ctx.fillStyle = 'red'; <br>ctx.fillText); ("Bonjour tout le monde !', 20, 100); <br>// remplir et tracer par motif <br>imageTexture = document.createElement('img'); <br>imageTexture.src = "../pattern.png "; <br>imageTexture.onload = chargé(); <br>} <br>fonction chargée() { <br>// délai de chargement de l'image <br>setTimeout(textureFill, 1000/30); <br>} <br>function textureFill() { <br>// var woodfill = ctx.createPattern(imageTexture, "repeat-x"); <br>// var woodfill = ctx.createPattern(imageTexture, "repeat-y"); <br>// var woodfill = ctx .createPattern(imageTexture, "no-repeat"); <br>var woodfill = ctx.createPattern(imageTexture, "repeat"); ctx.StrokeText('Hello World!' , 20, 200); <br>// remplir le rectangle <br>ctx.fillStyle = woodfill; <br>ctx.fillRect(60, 240, 260, 440); } <br></script>

Démo de texte sur toile HTML5 - Par Gloomy Fish

Remplir et contour

;/corps>
< /html>

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn