API Canvas, bases populaires du Canvas (2)

Ci-dessus, nous avons parlé de tracer une ligne, de dessiner un rectangle et d'écrire du texte. Nous avons enfin pris un bon départ. Si vous ne l'avez pas encore lu, sortez et tournez à gauche. entrez dans les détails ici, examinons ensuite quelques propriétés et méthodes plus complexes !

Avant d'en parler, j'ai quand même envie de le revoir. Après tout, il y a quelques attributs que je n'ai pas mentionnés ci-dessus, alors commençons par dessiner un triangle !

Si vous lisez ce qui précède, le jeune homme intelligent pensera certainement qu'un triangle est si simple, c'est juste un point de plus qu'une ligne droite, alors le jeune homme a commencé à le faire :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.stroke();

Oh, pourquoi est-ce une polyligne ? Un triangle n'a-t-il pas seulement trois points ? Est-ce parce qu'il n'est pas fermé ? Alors permettez-moi d'ajouter un point supplémentaire :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.stroke();

Haha, je suis en effet aussi spirituel que vous ! Cette idée est en fait la bonne solution. Les triangles sont aussi simples que cela. En fait, il existe une autre façon de dessiner des triangles, qui ne nécessite que 3 points :

closePath() ferme le. path

S'ils sont fermés, ils sont le début. De manière générale, ils sont par paires

beginPath() start path

L'utilisation de cette paire de trésors vivants est. généralement :

ctx.beginPath();

ctx.closePath();

Commencez par la route Jin, écrivez le contenu que vous souhaitez y dessiner, puis terminez la route Jin, ce qui équivaut à une boîte qui a été scellée. qu'il peut éviter la contamination du style pendant le processus de dessin. Vous ne savez pas comment le contaminer ? Eh bien, regardez ci-dessous :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.stroke();
//第二个三角
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
ctx.lineTo(150,50);
ctx.stroke();

Comme le montre l'image, si à l'origine je voulais que la couleur du premier triangle soit rouge et que le second soit vert, mais maintenant les résultats sont tous verts, et les yeux sont perçants. Mes camarades de classe ont également vu que le premier triangle avait l'impression d'avoir deux couleurs, et que la couleur était très sombre. C'était comme s'il y avait deux triangles empilés l'un sur l'autre. Bon, changeons-le, vous le regardez :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
//ctx.stroke();
//第二个三角
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
//ctx.lineTo(150,50);
ctx.stroke();

Ne dessinons pas le premier triangle, ni le côté gauche du deuxième triangle, puis jetons un œil :

Non, un triangle n'a plus de couleurs doubles, il est dessiné deux fois, une fois rouge et une fois verte. Le redessinage est supprimé. Les couleurs ultérieures polluent également les couleurs précédentes. Ce n'est pas ce que nous voulons. !

Alors utilisons la paire de trésors vivants pour voir :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.closePath();
ctx.stroke();
//第二个三角
ctx.beginPath();
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
ctx.lineTo(150,50);
ctx.closePath();
ctx.stroke();

C'est ce que nous voulons, vous jouez le vôtre, je joue le mien, sans interférer l'un avec l'autre, (vous avez dit Vous il suffit de 3 points pour dessiner un triangle, vantez-vous B, vous voyez que vous utilisez 4 points), oh, c'est vrai.

La méthode closePath() crée un chemin du point actuel au point de départ. C'est-à-dire qu'en utilisant cette méthode, vous pouvez déplacer le pinceau vers la position de startPath. (), pour terminer le canevas, donc selon cette théorie, lorsque nous dessinons un triangle, lorsque nous dessinons jusqu'au troisième point, nous utilisons la méthode closePath() pour ramener le pinceau au point de départ, puis traçons la ligne Est. ça s'est fermé ? Voyons l'effet :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.closePath();
ctx.stroke();

Regardez, il n'y a que trois points, pas des polylignes, n'est-ce pas ? Vous pouvez utiliser cette compétence sur n'importe quel graphique en éventail ou graphique irrégulier dont je parlerai plus tard ? parfait!

Hé, ce n'est rien de plus. Vos lignes ne font qu'un pixel, et elles ne peuvent pas être les mêmes que le gourdin doré de Sun Wukong. Il doit être plus grand et plus petit, et il doit être plus petit et. plus petit. Hein, qui a dit ça ? J'ai une arme magique en main, tu es invincible !

Mon arme magique est :

lineWidth définit ou renvoie la largeur de ligne actuelle
Comment utiliser
 ? Frère me donne un gourdin doré :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
vartimer=null;
varnum=1;
ctx.moveTo(150,50);
ctx.strokeStyle='gold';
setInterval(function(){
if(num==100){
clearInterval(timer);
num=1;
}else{
num++;
};
ctx.lineTo(150,100+num*2);
ctx.lineWidth=num;
ctx.stroke();
},100)

Grard doré, gros, gros, gros, gros, plus gros, hahaha~~~
Ahem, sois sérieux, il y a cette arme magique, on peut la modifier la largeur de ligne de n'importe quel filaire et ligne, comme les triangles creux et les rectangles creux, bien sûr, ne me posez pas de questions sur le texte creux, je ne sais pas ~
Concernant les lignes, il y a deux autres attributs :
. lineJoin type de coin où deux lignes se croisent
Paramètres :
onglet : coin pointu par défaut
biseau : biseau
rond : coin arrondi

Qu'est-ce que cela signifie, puis utilisez-le Prenez le creux rectangle à titre d'exemple :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.beginPath();
ctx.lineJoin='miter';
ctx.strokeRect(100,10,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin='round';
ctx.strokeRect(100,110,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin='bevel';
ctx.strokeRect(100,210,80,80);
ctx.closePath();

Le côté droit est l'effet polyligne

Avec l'effet polyligne, il y a aussi un attribut :

miterLimit précise le longueur d'onglet maximale. Quelle est la signification ? Regardez le graphique linéaire à droite. Le groupe inférieur de coins pointus est appelé onglet. La signification populaire est de spécifier la longueur du coin pointu. Si la longueur du coin pointu est inférieure à la valeur de mitreLimit, cela sera le cas. être affiché normalement. S'il est plus grand que la valeur, une partie sera coupée et sa forme est la même que celle de lineJoin='bevel'. Cette méthode ne fonctionne que lorsque la valeur par défaut de lineJoin="miter" est définie. . Laissez-moi vous donner un exemple :

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.beginPath();
ctx.miterLimit=19;
ctx.moveTo(20,20);
ctx.lineTo(150,27);
ctx.lineTo(20,34);
ctx.stroke();

ctx.beginPath();
ctx.miterLimit=18;
ctx.moveTo(20,120);
ctx.lineTo(150,127);
ctx.lineTo(20,134);
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="bevel";
ctx.moveTo(20,220);
ctx.lineTo(150,227);
ctx.lineTo(20,234);
ctx.stroke();

Comme le montre la figure, lorsque la valeur de mitreLimit est supérieure ou égale à 19, les angles vifs s'affichent normalement lorsqu'elle est inférieure. que 18, les coins pointus sont tronqués. L'effet est le même que le réglage de lineJoin='bevel' , je ne sais pas encore quel effet cela aura, je le découvrirai plus tard !

Autre :
lineCap définit ou renvoie le style du point final de la ligne. Remarque, ceci sert à définir la ligne !
Paramètres :
but par défaut. Ajoutez des bords droits à chaque extrémité de la ligne.
round ajoute des capuchons de fil arrondis à chaque extrémité de la ligne.
square ajoute une casquette de ligne carrée à chaque extrémité de la ligne.
Qu'est-ce que cela signifie ? Quant aux lignes, prenons comme exemple le gourdin doré. Oublions ça, utilisons les lignes (j'ai envie de rire quand je vois le gourdin doré

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.beginPath();
ctx.lineCap='butt';
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.stroke();

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

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

Comme vous pouvez le constater, les deux derniers sont) ; mieux que le Un devrait être plus long, combien de temps ? Dessinez une image pour illustrer :

圆角和方脚的原理其实是这样的，很明显多出的一部分的宽度就是线条的一半的长度，所以要精确计算其长度，此小细节需谨记！

现在我们来讲讲画圆及其相关的图形：

arc(x,y,r,sAngle,eAngle,counterclockwise)

什么意思？x,y表示坐标点表示圆心坐标，r表示半径，sAngle表示开始弧度，eAngle表示结束弧度，counterclockwise表示顺时针还是逆时针方式，默认为顺时针false，逆时针为true

注意，这里的角度是用弧度表示的，不是直接写角度，那问题来了，一般我们知道一个圆弧是多少度，怎么知道它是多少弧度呢？总感觉弧度太抽象，嗯嗯，我也有同感，那我们就来科普一下弧度的算法吧，列几个公式（初中，高中的数学，都还给老师了）：

1弧度=r;
360°=2∏;
周长C=2∏r;
那么一周的弧度数=2∏r/r=2∏=360°
则1°=2∏*1°/360°=∏*1°/180°（弧度）
90°=∏*90°/180°（弧度）

圆的初始位置是在最右边，跟我们自己手绘圆的起点有那么一点点的不一样，默认是顺时针方向，那角度就应该是如图所示的角度，要是还不清楚的话，我们画2半圆，分别表示顺时针和逆时针，这样就应该清楚了，哦，需要说明的一点就是，画用的方法跟画直线和矩形框的原理是一样的，只是画出了路径，并没有添墨水，仍需用黑白双煞：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(80,100,50,0,180*Math.PI/180,false);
ctx.stroke();

ctx.beginPath();
ctx.arc(200,100,50,0,180*Math.PI/180,true);
ctx.stroke();

js里面是没有∏的，你懂的，但是有函数Math.PI，咦，这里为什么是圆弧而不是半圆啊，如果我要画一个半圆怎么弄呢？哈哈~，还记得上面三角形的那个折线吗？这个是一个原理，只是图形没有闭合而已，用closePath()就可以闭合了。

画一个扇形看看，这里我就闭合图形哈：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(80,100,50,30*Math.PI/180,150*Math.PI/180,false);
ctx.closePath();
ctx.stroke();

当当当当~~~噗，喷了一口老血，怎么是一条小船，说好的扇子呢？再看看三角图形，瞬间就明白了，图形闭合不是以圆心为起始点的，而是初始弧度为起点，然后闭合的时候是回到初始点，就变成小船了，那怎么才能画出一个扇形呢？给个思路，这里暂时不给代码，以后有时间当小实例给到大家，如果我以圆心为起点，画2条直线，连到圆弧的起始点和结束点，是不是就是一个扇形了，哈哈~，不多说了，脑补一下吧，当然，圆弧的起始点的坐标和结束点的坐标计算还是有点费劲的

前面我们画的是空心的圆或弧，可否画实心的呢？貌似问的有点多余，上面说了用黑白双煞，好吧，直接给个一饼好了：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.arc(150,150,50,0,360*Math.PI/180,false);
ctx.fill();

咦，怎么这么像某岛国国旗，还好我用的是默认黑色，嘘嘘，都没看到哈~
还有一个方法可以画圆弧：
arcTo(x1,y1,x2,y2,r)创建两个切线之间的弧/曲线
参数：x1,y1表示第一个坐标，x2,y2表示第二个坐标，r表示曲线半径
两个切线之间的曲线，试试：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.arcTo(150,20,150,70,50);
ctx.lineTo(150,120);
ctx.stroke();

果然是要在两条线段之间写曲线，要是先写2条曲线，在写arcTo()，貌似就出不来了，这让我们想到了moveTo(),lineTo()，再写一个例子：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(150,20);
ctx.arcTo(150,200,50,0,20);
ctx.stroke();

想试一下，要是只有一条切线，会怎样？

好大的一个鱼钩啊，看来这样也是可以的，要是没有切线，可否？

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.arcTo(150,200,50,0,20);
ctx.stroke();

额，狗带了，没反应，看来必须至少有一个切线才能画弧线，有个点都行，要求不算高，满足你。

感觉这里始终没有将清楚，arcTo()为什么会画出这样的曲线呢，我觉得有必要画一张图来表示：

它的绘图原理应该是这样的，起始点是圆弧的第一个切点，也是画笔的起始点，然后arcTo的两个坐标点分别是圆弧的起点和终点，这样3个点就形成了2天相交的线，然后以半径为r画一个圆，与这2条线相切，2个切点就是绘制的这条弧，而第二张图就是arcTo()所绘制的图形，为了证实这一点，我们写一个相近的图形来看看：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.fillRect(100,100,5,5);
ctx.fillRect(180,80,5,5);
ctx.fillRect(160,180,5,5);
ctx.moveTo(62,112);
ctx.lineTo(182,82);
ctx.lineTo(162,182);
//这里是绘制切线弧
ctx.moveTo(103,103);
ctx.arcTo(183,83,162,182,40);
ctx.stroke();

对比这2组图，将生成的弧线用圆对比一下，会发现起点并不是切点，但基本思路是正确的，3点形成一个夹角，然后以r为圆心，画一个圆，从起点到第二个切点，就是arcTo()方法所绘制的图形。

今天就到这吧！讲的很混乱，东一脚西一脚的，希望你们能懂！最希望的是能对你们有帮助，那就再好不过了！

 以上就是canvas API ，通俗的canvas基础知识（二） 的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

相关文章：

canvas API 介绍，常见的canvas基础知识（一）

Introduction à l'API Canvas, connaissances de base communes sur Canvas (3)

Introduction à l'API Canvas, connaissances de base communes sur Canvas (4)