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

WBOY

Libérer： 2016-05-16 15:49:15

original

2018 Les gens l'ont consulté

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" >

Remplissage de toile Et Stroke Text Demo

<script> 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."); return; } // obtenir le contexte 2D du canevas et dessiner un rectangle ctx = canvas.getContext("2d"); ctx.fillStyle= "black"; ctx. fillRect(0, 0, canvas.width, canvas.height); // remplissage et contour du texte ctx.font = '60pt Calibri'; lineWidth = 3; ctx. StrokeStyle = 'green'; ctx.StrokeText('Bonjour tout le monde !', 20, 100>ctx.fillStyle = 'red'; ctx.fillText); ("Bonjour tout le monde !', 20, 100); // remplir et tracer par motif imageTexture = document.createElement('img'); imageTexture.src = "../pattern.png "; imageTexture.onload = chargé(); } fonction chargée() { // délai de chargement de l'image setTimeout(textureFill, 1000/30); } function textureFill() { // var woodfill = ctx.createPattern(imageTexture, "repeat-x"); // var woodfill = ctx.createPattern(imageTexture, "repeat-y"); // var woodfill = ctx .createPattern(imageTexture, "no-repeat"); var woodfill = ctx.createPattern(imageTexture, "repeat"); ctx.StrokeText('Hello World!' , 20, 200); // remplir le rectangle ctx.fillStyle = woodfill; ctx.fillRect(60, 240, 260, 440); } </script>

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

Remplir et contour

;/corps>
< /html>