00:00
哈喽,各位小伙伴大家好,那么我们刚刚啊,利用canvas去绘制了一个三角形。那么当然啊,卡vas呢,也可以绘制其他的图形,比如说矩形。那接下来啊,咱们呢,通过一个DEMO去讲解一下子如何去绘制一个矩形。那咱们来一个零二,叫做canvas,绘制矩形。那当然啊,咱们呢,该有的东西啊,你还是得有,对吧,比如说画布canvas。那一集啊,老师呢,也稍微呢,给他来一点样式,这样好看一些。Mary。以及啊,咱们的pading padding pading的也给它为零。那么以及啊,给咱们的卡vas啊,老师呢,给它加一个外边框border。
01:00
比如说咱们给他来个一像素啊,十像素吧,Solid来一个黑色。那咱们呢,去把咱们的这个小DEMO给它运行起来,咱们的去看一下。对吧,那当然咱的布呢,这个有点大,这个包咱来小1.1像素吧,那以及画布呢,老师呢,给他一个宽度,比如说呢,来一个600像素。以及呢,高度呢,咱给他来一个呢,400像素,当然这个P叉你可写可不写。那咱们保存一下,回首的去看一下,OK,这是没问题的。那接下来啊,咱们就是通过GS,通过那个比去绘制矩形,当然先获取到节点。那咱们呢,Let一个covers等于document的点,Query select咱们的。那以及啊,获取咱们的上下文,也就是所谓的比。
02:03
Light一个CX等于convas.get con几D呢?别忘了是不是2D。那么首先说啊,咱们呢,可以通过上下文的两个方法分别去绘制矩形。第一个是谁呢?第一个叫做叫做。A few RA,还有一个叫做stroke RA,那咱们先看下第一个啊绘制,写一下绘制矩形的第一种方式。就是上下文呢,它有一个方法叫做stroke。Joke呢是画的意思,RA是矩形,当然它需要四个参数,因为绘制一个矩形,它需要知道你这个矩形的X是多少,Y是多少,宽是多少,高是多少。比如说老师呢,让他的X呢,是100像素。
03:03
那么Y呢,咱给他来一个,比如说Y咱给他来一个200。以及多宽,100宽,多高,200高,那这样呢,可以在咱们的画布当中看到这样的一个矩形。那这个参数啊,咱们需要说明一下子,第一个参数是什么呢?是你这个矩形距离水平轴X轴的距离100。对吧,那第二个参数200是什么呢?是你这个矩形这的顶部距离,顶上的距离是200,以及100宽,200高,这要注意一下。所以说它的参数是什么呢?哎,参数。啊,为X,还有这个Y,以及W和H。当然啊,这是属于绘制矩形的第一种手段,那么绘制矩形的第一种手段就是什么?就是描边,哎,只有轮廓,而不能设置填充颜色。
04:01
当然咱们呢,还可以采用第二种手段写一下。就是第二种方式绘制矩形。它们也是上下文的一个方法,叫做feel RA做填充句型。比如说啊,咱们呢,给他来一个,比如说200啊X200Y呢,200多宽,100宽多高,200高,那这样呢,咱们呢,可以看到一个填充带有填充颜色这样的矩形。当然咱们的距离啊,稍微让它远一些。比如说300。对吧,那这样呢,这就是一个带有填充颜色的这样的一个矩形,但是它默认的填充颜色呢,是黑色,所以说一定要注意,一个绘制矩形是什么呢?就是只是描边,第二个呢,带有什么呢?带有填充颜色的。但是填充的颜色呢,来写一下填充的颜色,填充的颜色啊可以替换。
05:00
比如说Ctx.f sta偏重的样式,比如说咱给它来个青色,当然你现在运行的应该是看不见的啊可以对吧?哎,但是一般呢,还需要调用哪个方法呢?就是C tx.F方法开始填充。当然如一定要注意一件事,什么事呢?就是咱们的这个Ctx.file方法,它是用于什么呢?用于填充颜色的,当然你看填充颜色在绘制图形之前和之后有没有区别,那咱们呢,可以看一下是不是有区别。对吧,所以说填充的颜色务必放在哪儿呢?放在绘制图形之上。对不,就是绘制图形之前设置咱们的填充颜色,叫做Ctx.few style填充的样式,为什么色,比如说咱来个sky blue啊,当然咱们的这行代码呢,也可以不用写,叫做这个呢,其实就是填充。
06:01
他呢只是告诉人家,哎,我设置的填充的样式是什么颜色,这个呢是开始填充,那所以说啊,咱们呢可以看一下的,那这样不就完成了吗。那我相信啊,很多小伙伴可能会看到很多关于数据可视化的,比如说柱状型啊,柱状图对不?那其实咱们利用canvas是不是就可以完成。当然这种呢是属于绘制矩形,但是千万别忘记绘制矩形呢有两种手段,第一种描边,第二种就是这种填充颜色的,那这里呢要注意像。这种的矩形啊,是没有办法设置什么呀,填充颜色的,没有相应的API,就算你写了他也白扯,他也设置不了填充的颜色,咱们呢,可以看一下,它只能通过轮廓去描述一个什么,描述一个举形。所以说这几个参数要记住了,分别是XYW和H。
我来说两句