00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们去学习一下子画布当中如何去绘制一个圆。那首先说啊,画布当中的任何操作都是通过咱们的ctx上下文去完成的。也就是咱们画布的那个笔。而画布当中的这个笔啊,也就是这个上下文给咱们提供了一个方法,叫做ARC。那么我们啊,可以利用ARC这个方法呢,去绘制一个圆。当然这个方法呢,是需要传递参数的,那么传递几个参数呢?是六个参数。这六个参数分别是什么呢?是X和Y。X和Y是什么呢?是你这个圆的圆心。圆心距离X轴和圆心距离Y轴的距离。以及第三个参数叫做radio,是半径啊。
01:00
那当然,一个圆它是需要有圆心以及半径的。以及呢,第四个和第五个参数分别叫star angle和n angle。它代表的呢,是开始的角度和结束的角度。以及第六个参数。它是什么?是,是否逆时针绘制?如果是不尔之处,OK,你逆时针绘制,那如果是false呢?那就是顺时针经绘制。那这里啊,咱们呢,还是通过一个DEMO去学习一下。那这个呢,是咱们的零三去绘制啊,绘制咱们的圆形。哎,圆形。那咱们呢,还是得来一个小DEMO对吧,那这块呢,咱们呢还是给他来一个canvas。以及宽度,宽度呢,比如说老师还是给他来个600,以及高度呢是400。那咱们呢,也稍微啊去写一丢丢样式,让它稍微好看一些。
02:05
那咱们呢,还是给画布啊,给它添加上一个啊边框,这样一眼就能看见对吧?当然清除默认样式,咱们这件事儿呢,还是得做,以及ting v r为零。以及啊,咱们的convas,那么老师啊,给它来一个BORDER1像素solid来个什么色呢?来一个黑色啊咱们保存那运行一下,稍微看一眼。走,你。那在画在页面当中啊,应该是能看到一个画布,600乘400这样的一个画布,那接下来啊,咱们呢,就是通过JS去完成咱们的绘制这样的一个圆。那当然第一件事儿呢,是获取到节点,获取节点。那就是light,一个covers等于document的点query select咱们的vas。
03:00
那以及啊,获取咱们的上下文啊,也就是咱们的画布的比light一个ctx等于canvas。第二,Get con几D呢?是咱们的2D。那接下来啊,咱们就要绘制咱们的这个圆了,哎,圆形。那怎么绘制呢?那这块呢,要注意它呢,是以ctx点比跟PA啊比跟PA开始进行绘制。对不,这块呢要注意是以ctx点比根派这个方法进行开始绘制圆。Begin是开始,PA呢是路径对吧,那接下来那就是绘制源,就是Ctx.AC。那这个呢,就是绘制啊,绘制咱们圆形的方法。要注意它有六个参数,分别呢,是什么呢?是圆心的X和Y啊,就是你这个圆在坐标体系,在这个画图的坐标体系的位置和位置距离水平轴和Y轴的距离,比如说咱给他来个一百一百。
04:11
那当然第三个参数是什么呢?是它的半径啊是二,那比如说啊老师呢,给他来一个半径,半径多少呢?比如说50。对吧,那第三个参数是什么呢?是起始的弧度啊,起始的弧度对吧,第五个参数呢,是结束的弧度,哎,结束的弧度。那这里面呢,有一个小数学啊,需要注意啊,这个数学呢,你得知道。咱们应该知道,就是360度等于多少弧度呢?等于二派弧度,这件事儿你得知知道就是360度。360度,那不就是一圈吗?对,不360度,它等于二派的弧度,对吧,二派。
05:02
这件事儿你得知道,所以说它的这个起始弧度和结束弧度,他要的是弧度值。啊,这件事儿一定要注意,咱们呢,千万不要以为传进来的是度数,是弧度啊,这块要注意,360度等于二派弧度。那就说起始的弧度呢是零,结束的弧度呢是二派弧度,那就是二乘以ma点派。那二派正好是二派个弧度就是360度,正好是一个圆。那一集还有最后一个参数是否是,哎,是否。哎,逆时针啊绘制。那咱们呢,就给它来一个处,那真就逆时针绘制,那当然,那咱们呢,先运行一下,先看一下,你能看见圆吗?是看不见的,为什么呢?因为你需要绘制这个圆,哎,写下。就是绘制圆啊圆形。
06:03
就是ctx点,那这样你就可以在你的画布当中看见一个圆。那这里呢,老师呢,要解释一下这几个参数。虽然说XY是什么,是你这个圆的圆心。它距离水平轴100,距离Y轴100,以及半径是50,这块要注意半径是50啊,那以及啊,起始弧度和结束弧度就是起始是零,弧度零,那就是零度,以及结束弧度呢是二派弧度,就是360度一圈。以及最后一个参数是否是逆时针绘制,那就是逆时针绘制。对不,所以说那咱们呢,就绘制了这样的一个圆,当然咱们这个圆呢,你也可以设置填充的颜色,哎,设置填充的颜色,比如说Ctx.feel style,为什么呢?比如说来一个中国红,当然你需要填充Ctx.fine。
07:07
那这样呢,咱们的圆啊,就有填充的颜色,就是咱们的这样的一个红色。那这里啊,老师呢,要把后面这几个参数呢,再说说啊,因为前面这个容易理解,比如说咱们呢,再绘制啊一个圆,你看老师这次这么绘制。CTx.begin。对不?CTx.AC那这回咱们圆的半径呢,老师给他来一个200。I乘200以及呢啊,圆心啊,半径的也是50,但这回呢,起始弧度是几个是一。对,不结束弧度是多少呢?是二。那以及是否是呃逆时针处,那就是逆时针,或者咱来个零和一啊零一。对吧,七是零结束是一。老师,那你这样画的是一个什么呀?那咱们看一下Ctx.stroke。
08:05
你看它画出来的是一个弧。对不对,它画出来的是一个弧啊这样的吧,老师呢,先给它改为false false就是顺时针绘制,那这样容易理解一些。对不?你看他就绘制了一个弧,说老师这是啥意思呢,那咱们看一下老师呢,也给你们画一个图啊,画一个图,画图你看啊。这是咱们的一个画布。对不,那咱们看一下你看啊。它的I,它的这个圆心的坐标是多少呢?是200乘200,就比如说是哪呢?就比如说是这。对不对,就比如这是200乘200那一级,它的半径啊是50 OK,半径是50。那么起始的弧度是多少?是零,那水平方向现在不就是零吗?那一是多少弧度呢?那你这块你得算了。
09:03
对不?咱刚刚也说了,你看360度写下的360度等于二派克弧,你看比如说二乘以。派二派个弧度,比如说弧度呢,咱就叫R。等于多少呢?等于360度。对不,这个咱就写弧度吧,弧。对吧,哎,弧度的弧,也就是说二派个弧等于360度,那一个弧度你看这不一吗?一个度等于多少度啊,那不就是三百六除以二派。对不,那所以说那你看算一下子,那不就是一百八除以PA,你看咱可以算一下子一弧度大概多少度,那不就是一百八哎,除以多少,除以咱们的M点派。大约等于57度,接近于60度。对不,那接近于60度,那指定是不可能是这这是90度,那大概是这个位置。
10:04
对不,那这是起始弧度和结束弧度。对不对,而且咱们最后的一个参数是什么?是false false代表啥?False代表的是顺时针。那是不是就这个样子。那如果是逆时震动,那不就是这个样子。对吧,所以说你看老师如果给他改成处,那不就是逆时针吗?那逆时针不就是这个样子,起始弧度和结束弧度,但是要注意它是逆时针绘制的。对不?所以说咱们绘制了一个圆,但是这里面有一个数学,你务必得知道二派的弧度等于360度。
我来说两句