Notes d'étude préliminaires sur Html5 Canvas (3) - Styles de dessin et texte de dessin

en définissant le contexte de rendu 2d fillStyle et StrokeStyle propriété, vous pouvez modifier la couleur de remplissage ou la couleur du dessin.

Vous pouvez modifier la couleur des trois manières suivantes :

Rgbformat :

context.fillStyle = 'rgb(255,0,0)';//设置绘制颜色
context.strokeStyle = 'rgb(255,0,0)';//设置绘制颜色

Format du code Hex :

context.fillStyle = '#FF0000';//设置绘制颜色
context.strokeStyle = '#FF0000';//设置绘制颜色

type de mot :

context.fillStyle = 'red';//设置绘制颜色
context.strokeStyle = 'red';//设置绘制颜色

De plus, pour les choses qui sortent du trait, vous pouvez également modifier lineWidth attribut pour modifier la largeur de ligne. La largeur de ligne par défaut est 1.

La comparaison des effets est la suivante :

Ce qui précède est une largeur de ligne de 1 , la largeur de ligne ci-dessous est 5.

Il convient de noter que la couleur et la largeur de ligne sont les mêmes que celles de j2me setColor Le statut La valeur ne sera pas restaurée à la valeur par défaut après utilisation. Le texte dessiné dans

Canvas est dessiné sous la forme d'une image et ne peut pas être sélectionné par le pointeur de la souris comme un texte html ordinaire. La taille de la police peut être sélectionnée pour dessiner du texte dans Canvas, qui est définie dans l'attribut font. Il existe également des méthodes fill et Stroke lors du dessin, qui sont respectivement des mots remplis et des mots creux. Le premier paramètre est le texte, et le deuxième Le premier paramètre et le troisième paramètre est le point d'ancrage du texte (coin inférieur gauche). Les effets de code et de police sont les suivants :

sont normaux et italique respectivement , et l'effet des mots creux :

Ce qui précède est le contenu des notes d'étude préliminaires de Html5 Canvas (3) - style de dessin et texte de dessin. Veuillez prêter attention au contenu plus connexe. Site Web chinois PHP (www.php.cn) !