canvas API, popular canvas basic knowledge (2)

Above we talked about drawing a line, drawing a rectangle, and writing text. We finally got a good start. If you haven’t read it yet, go out and turn left. Read that article first. I won’t go into details here. , let’s look at some more complex properties and methods next!

Before I talk about it, I still want to review it. After all, there are a few attributes that I haven’t mentioned above, so let’s start by drawing a triangle!

If you read the above, the clever young man will definitely think that a triangle is so simple, it is just one more point than a straight line, so the young man started to do it:

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

Oh, why is it a polyline? Doesn’t a triangle only have three points? Is it because it is not closed? Then let me add one more point:

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, I am indeed as witty as you! This idea is actually the correct solution. Triangles are that simple. In fact, there is another way to draw triangles, which only requires 3 points. That is what we are going to introduce:

closePath() closed path

If they are closed, they are the beginning. Generally speaking, they are in pairs.

beginPath() start path

The usage of this pair of living treasures is generally:

ctx.beginPath();

ctx.closePath();

Start first Road Jin, write the content you want to draw in it, and then end Road Jin, which is equivalent to a box that has been sealed. The advantage of this is that it can avoid style contamination during the drawing process. You don’t know how to contaminate it? Well, look below:

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();

As shown in the picture, if I originally wanted the color of the first triangle to be red and the second one to be green, but now the results are all green, and sharp-eyed classmates I also saw that the first triangle seems to have two colors, and the color is also very dark. It feels like two triangles are stacked. Didn’t you see it? Okay, let’s change it, you’re looking at:

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();

Let’s not draw the first triangle, nor the left side of the second triangle, and then take a look:

The first one The triangle no longer has dual colors. It was drawn twice, once red and once green. The redrawing was eliminated. The later colors also polluted the previous colors. This is not what we want. You should understand this pollution, right? !

Then let’s use the pair of live treasures to see:

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();

This is what we want, you play with yours, I play with mine, without interfering with each other, (you said drawing a triangle It only takes 3 dots, brag B, you see you are using 4 dots), oh, right.

The closePath() method creates a path from the current point to the starting point. This is a description of this method. That is to say, using this method, you can move the brush to the position of beginPath(), so that End the canvas, so according to this theory, when drawing a triangle, when drawing to the third point, we use the closePath() method to return the brush to the starting point, and then draw the line. Is it closed? Let’s see the effect:

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();

Look, there are only three points, not polylines, right? You can use this skill on any fan chart or irregular graphics that I will talk about later. It’s perfect!

Hey, it’s nothing more than that. Your lines are all one pixel, and they can’t be the same as Sun Wukong’s golden cudgel. It needs to be bigger and smaller, and it needs to be smaller and smaller. Huh, who said that? I have a magic weapon. With it in hand, you are invincible!

My magic weapon is:

lineWidth sets or returns the current line width

How to use it? Brother gives me a golden hoop:

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)

Golden hoop, big, big, big, big, bigger, hahaha~~~
Ahem, be serious, with this artifact, we You can modify the line width of any wireframe and line, such as hollow triangles and hollow rectangles. Of course, don’t ask me about hollow text. I don’t know~
Regarding lines, there are two other attributes:
lineJoin corner type where two lines intersect
Parameters:
miter: sharp corner default
bevel: bevel
round: rounded corner

What do you mean, then use a hollow rectangle For example:

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();

The right side is the polyline effect

With the polyline effect, there is also an attribute:

miterLimit specifies the maximum miter length. What's the meaning? Look at the line chart on the right. The bottom group of sharp corners is called a miter. The popular meaning is to specify the length of the sharp corner. If the length of the sharp corner is less than the value of miterLimit, it will be displayed normally. If If it is larger than the value, part of it will be cut off, and its shape will be the same as lineJoin='bevel', and this method only works when lineJoin="miter" is the default value. Let's give a vivid example:

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();

As shown in the figure, when the value of miterLimit is greater than or equal to 19, the sharp corners are displayed normally. When it is less than 18, the sharp corners are truncated. The effect is the same as setting lineJoin='bevel'. I don’t know yet. What effect it has, we will find out later!

Another:
lineCap sets or returns the end point style of the line. Note that this is for setting the line!
Parameters:
butt default. Add straight edges to each end of the line.
round Adds rounded wire caps to each end of the line.
squareAdds a square line cap to each end of the line.
What's the meaning? As for lines, let’s take the golden hoop as an example. Forget it, let’s use lines (I want to laugh when I see the golden hoop);

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();

As you can see, the last two are better than the first It needs to be longer, how much longer? Draw a picture to illustrate:

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

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

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 to canvas API, common canvas basic knowledge (3)

Introduction to canvas API, common canvas basic knowledge (4)