html5 Canvas implémente le dessin de lignes droites et la définition de styles de ligne

Cet article présente principalement la mise en œuvre du dessin de lignes droites et de la définition de styles de lignes dans HTML5 Canvas. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Lors de l'apprentissage. pour dessiner, les lignes sont les plus élémentaires et la connexion des lignes peut former n'importe quel graphique. La même chose est vraie dans Canvas. Ensuite, je vais vous présenter en détail la méthode de dessin au trait la plus simple. Si vous ne savez toujours pas ce qu'est Canvas, vous pouvez lire l'article précédent
Lorsque vous apprenez à dessiner, les lignes sont les plus élémentaires, et la connexion des lignes peut former n'importe quel graphique. La même chose est vraie dans Canvas.
Avant de commencer, sortons la toile et les pinceaux :

var cvs = document.getElementById('cvs'); //画布 
var ctx = cvs.getContext('2d'); // 画笔

Quand on dessine, le point de départ n'est pas fixe et peut changer à tout moment. Bien que Canvas ne détermine pas le point d’écriture à la main, il existe une méthode : moveTo. La fonction de moveTo équivaut à soulever la pointe du stylet de la toile, puis à la déplacer vers le point spécifié (c'est-à-dire les coordonnées).

ctx.moveTo(x,y)

Aucun graphique ne sera dessiné au cours de ce processus, ce qui équivaut à tenir le stylo suspendu sur la toile.
Mais ça ne sert à rien de traîner, il faut commencer à dessiner. Dessinons d'abord la plus simple : une ligne droite
La méthode pour tracer une ligne droite est lineTo. Ses paramètres sont les mêmes que moveTo, qui est un point.
ctx.lineTo(x,y) Bien sûr, lorsque vous tracez une ligne, le point d'écriture se déplace également, donc après lineTo, le point d'écriture devient son point cible.

ctx.moveTo(100,100); 
ctx.lineTo(200,100);

À ce moment-là, lorsque vous actualisez la page Web, vous constaterez qu'il n'y a aucune ligne attendue sur le canevas, et il n'y a rien. Parce qu'il nous manque une étape, lineTo est en fait un "chemin" dessiné, lui-même invisible. Si on veut qu'il soit affiché, il faut le "dessiner".
Les étudiants qui ont utilisé PS connaîtront certainement les deux modes graphiques, l'un est le remplissage et l'autre le contour. Maintenant que nous avons tracé une ligne, cela équivaut à tracer un chemin dans PS. À ce stade, nous pouvons dessiner le bord du chemin et les graphiques seront affichés.
La méthode de trait du canevas est Stroke(). Complétons maintenant le code :

ctx.moveTo(100,100); 
ctx.lineTo(200,100);

ctx.Stroke(); Bien sûr, vous pouvez également tracer des centaines de chemins en continu, puis effectuer l'action de trait pour tracer des centaines de lignes à la fois. Dessinons maintenant un rectangle avec 4 lignes :

ctx.moveTo(100,100); 
ctx.lineTo(200,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); 
ctx.stroke();

Ici, nous dessinons d'abord tout le chemin, puis nous le traçons tout d'un coup.
——–Plainte de l'auteur : un inconvénient du dessin sur toile est qu'il est essentiellement basé sur des suppositions, ce qui est très peu intuitif.
Rappel sérieux : le processus de dessin sur toile (c'est-à-dire le remplissage et le tracé) consomme beaucoup de ressources. Si vous souhaitez économiser les ressources du système et améliorer l'efficacité, il est préférable de dessiner tous les chemins, puis de remplir ou de tracer les graphiques en même temps.
Nous pouvons voir sur le graphique ci-dessus que l'épaisseur de ligne par défaut est de 1 px et que la couleur de la ligne est noire. Bien sûr, nous pouvons les définir, mais ce qui est étrange, c'est que définir la largeur de ligne est lineWidth, mais définir le style de ligne s'appelle StrokeStyle. Pourquoi pas lineStyle ? Je ne sais pas non plus. :

ctx.lineWidth = 10; 
ctx.strokeStyle = 'rgba(255,0,0,0.5)';

Le code ci-dessus définit la largeur de ligne sur 10px et la couleur de ligne sur rouge translucide.

Comme le montre la figure 1, actualisez-la, quelque chose ne va pas ! Pourquoi y a-t-il un petit morceau manquant dans le coin supérieur gauche ? Ce n'est pas une illusion. La raison commence par la façon dont les lignes de la toile sont tracées.
Question : Si le chemin rectangulaire que je dessine a une largeur et une hauteur de 100 et que la largeur de ma ligne latérale est de 10 px, quelles sont la largeur et la hauteur totales du rectangle avec les côtés dessinés ? Est-ce 100+10*2=120 ?
Si le bord est complètement tracé en dehors du chemin, il fera 120. Mais Canvas ne l’est pas. Toutes les lignes dans Canvas ont une "ligne médiane", située au milieu absolu de la ligne. Les traits de la ligne s'étendent des deux côtés à partir de la ligne centrale. Par exemple, si la largeur de votre ligne est de 1, alors la ligne centrale est de 0,5 ; si la largeur est de 5, alors la ligne centrale est de 2,5. Lorsque les graphiques de la toile sont tracés, le tracé est aligné avec la ligne centrale de la ligne, puis tracé. Comme le montre la figure 2 :

Par conséquent, lors du traçage, la moitié de la ligne est à l'extérieur et l'autre moitié à l'intérieur, c'est-à-dire la largeur totale du rectangle ci-dessus est 100+(10 /2)*2, égal à 110.
C'est pour cette raison qu'il est naturel que le coin supérieur gauche ait un coin manquant. Parce que personne ne peint ici.
Mais pourquoi le reste des coins ne sont-ils pas crantés ? Ne semble-t-il pas y avoir des trous aux quatre coins de votre photo ?
C’est parce que je n’ai pas « soulevé » le pinceau lorsque je traçais la ligne. Le pinceau était continu, c’est-à-dire qu’il n’y avait pas de déplacement. Si vous n'y croyez pas, moveTo maintenant :

ctx.moveTo(100,100); 
ctx.lineTo(200,100); 
ctx.moveTo(200,100); //注意这里 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); 
ctx.lineWidth = 10; 
ctx.strokeStyle = 'rgba(255,0,0,0.5)'; 
ctx.stroke();

On moveTo avant de tracer la deuxième ligne, et moveTo ne change même pas les coordonnées, c'est toujours le même point, mais après rafraîchissement, le le graphique devient comme ceci [Figure 3] :

明白了？因为我们把笔提起来了。
现在我们删掉moveTo，不要纠结他了，我们来思考一下如何把左上角那个缺角给补上？
首先问个问题，我们的路径闭合了吗？这不是废话么，我们不是已经把路径绕回原点了么？当然算是闭合了！
错！这样只是让路径最后一个点和起点重合了而已，路径本身却没有闭合！
Canvas怎么闭合路径？用closePath().

ctx.moveTo(100,100); 
ctx.lineTo(200,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); 
ctx.closePath();//闭合路径 
ctx.lineWidth = 10; 
ctx.strokeStyle = 'rgba(255,0,0,0.5)'; 
ctx.stroke();

此时刷新，就是一个完美的正方形了。图4：

无论我们把线条改到多粗————越粗越有人喜欢是吧？————这个四方形的四个角都是规矩的直角，不会出现圆滑的情况。圆滑的角是什么情况？请看PS中的四方形描边，图5：

看到了吧，越粗的边线，他的角的圆弧越大。
如果我想Canvas里面的边线也和PS这种一样，有没有办法呢？当然有，就是lineJoin属性。
lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6：
 
毫无疑问我们一下就能明白我们的矩形用的是尖角，所以试着把他改成圆角看看：
图形变成了这样，图7：
 
有点像PS的了吧？
另外，通过前面图我们了解到，Canvas的线条两端是平的，可不可以改呢？毕竟平的不好看。
也是可以的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8
 
看图就能发现，其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。
你有没有想到什么？哈哈，前面的闭合路径的问题，如果我们把lineCap设为方头，效果也是一样的！
但为了保险起见，我们还是要把路径闭合了，切记！
我还要提醒一下：闭合的路径没有端点！所以闭合的路径上看不到端点的样式。
另外：lineCap与lineJoin有点相似，注意不要搞混。
如果你眼尖并且运气不好，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9：

恭喜你!你遇到了一个不是bug的bug。这个很特别，我把他放到下一篇文章讲吧

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 Canvas渐进填充与透明实现图像的Mask效果

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!