Remplissage de texte HTML5 Canvas, attributs de segment de ligne, méthodes de recadrage, de transparence et de fusion de pixels

De nombreuses propriétés en CSS3 peuvent être comparées à certaines propriétés de notre canevas
De nombreuses propriétés de l'objet d'environnement "brush" dans canevas peuvent être comparées aux propriétés en CSS3
Nous non seulement, vous pouvez uniquement dessiner des graphiques, mais vous pouvez également ajouter du texte au canevas

Remplissage de texte

Obtenez également d'abord l'objet élément et l'objet environnement

<canvas id="myCanvas" width=500 height=500></canvas>

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

police pour définir l'attribut Font
fillText définit le texte plein et la position
StrokeText définit le texte creux et la position

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

la police peut faire référence à l'attribut font du CSS
valeur par défaut '10px sans-serif'

---

Il existe également une méthode pour mesurer la largeur du texte, sachez-le
measureText()

console.log(ctx.measureText('hello world!').width);

Attribut de segment de ligne

Superposition de segment de ligne

lineCap() est utilisé pour définir l'attribut de couverture de segment de ligne
qui a trois valeurs, bout/carré/rond

ctx.lineCap = 'butt'; //默认ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();

Les lignes grises sur l'image sont ce que j'ai ajouté
comme ceci. Vous pouvez voir trois différences précieuses

Jointure de segments de ligne

lineJoin () définit le comportement de jonction des segments de ligne
Il existe également trois valeurs, onglet/rond/biseau

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

Quand on utilise l'onglet par défaut
Lorsque l'angle entre les deux segments de ligne est très petit
Le "point " deviendra de plus en plus grand

Quand il sera "pointé" "Quand il atteindra un certain niveau, la valeur par défaut deviendra plus grande

. Nous pouvons le configurer pour dépasser cette limite. Utilisez mitreLimit
pour que la longueur de la valeur par défaut soit définie comme étant limitée par nous. *lineWidth/2
C'est bon à savoir

ctx.miterLimit = 30;

<. 🎜>

Recadrer

L'attribut clip signifie que la zone en dehors du chemin actuel ne sera plus dessinée

Cela équivaut à découper la zone actuelle du canevas

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

Ici, je découpe la toile en cercle

De cette façon, lors du remplissage du rectangle, il ne peut être rempli que dans cette "toile circulaire"

Transparence

Utilisez globalAlpha pour définir la transparence globale

C'est très simple et il n'est pas nécessaire de l'expliquer

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

Fusion de pixels

globalCompositeOperation est utilisé pour définir la

méthode de fusion des nouveaux pixels graphiques et des anciens pixels graphiques
Il a 11 valeurs
Il y en a 3 communes, source-over (par défaut)/destination-over /copy
source-over signifie que les graphiques dessinés plus tard sont superposés sur les graphiques dessinés en premier
destination-over est que les graphiques dessinés en premier sont dessinés au-dessus des graphiques dessinés plus tard
copie est que seuls les graphiques dessinés plus tard sont affichés Graphiques (dessinez d'abord les graphiques et disparaissez)
Les autres valeurs sont théoriquement comme celle-ci (différents navigateurs ont des niveaux ou des méthodes d'implémentation différents)

ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();

Ci-dessous je donne les 11 valeurs​​que j'ai testées sur la dernière version de Chrome pour votre référence

source-over :

destination-over :

copie :

plus léger :

xor :

source-au sommet :

destination-au sommet :

source-in :

destination -dans :

source-out :

destination-out :

Ce qui précède est le canevas HTML5 texte Concernant le remplissage, les attributs des segments de ligne, le recadrage, la transparence et les méthodes de fusion de pixels, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !