00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去学习一下子canvas画布。那么在刚刚介绍数据可视化的时候啊,咱们也说过。那么一些数据可视化框架的底层啊,用到了canvas。所以说啊,咱们呢,得掌握一些canvas的知识点。那首先说啊,Canvas这个单词,它本身的意思就是画布啊,就相当于画家所要作画的一张白纸。那首先说啊。它呢是HTML5当中新增的一个特性。那么咱们应该知道H5当中新增的特性有很多,比如说本地存储,比如说多媒体,比如说C3,对吧,那么canvas也是H5当中新增的一个特性。而且呢,它呢是一个双闭合的一个标签。
01:02
所以说说白了是什么?就是H5当中新增的一个双闭合标签。那么canvas这个标签啊。可以让咱们在网页上通过JS去绘制一些图形。当然也可以展示一些图像。也可以呢,去完成一些简单的动画。甚至呢,可以在画布当中啊,去显示咱们的视频,当然音频是不可以的。那这里呢,咱们呢,去看一下canvas一个基本的使用。那首先说啊,Canvas标签,它只是图形的容器,相当于一个画布啊,就像刚刚老师给你们举的那个例子似的,哎,一个画家他想画一个画,那得有啥,得有一张白纸。那个白纸就是画布,也就是所谓的堪瓦斯。
02:02
那么要注意一件事,Canvas元素啊,本身是没有绘图能力的,所有的绘制工作啊,必须在GS内部完成,相当于使用画笔在画布上画画。什么意思呢?就是canvas,你可以把它想象成是一张白纸,而这个白纸是自己没有能力去画图形的,那你想在这个白纸上画画,OK,你需要。拿笔去画,而这个笔是什么呢?就是GS。所以说要注意一件事,Canvas上你想绘制图形,OK,你必须得用这个画笔才能画。那这里呢,还要注意一件事,其实画笔就是谁呢?就是这个上下文啊,叫做get contest。它呢是属于canvas节点的一个方法,它呢可以获取一个叫做上下文这样一个对象,实指就是这个画布的笔。
03:07
当然这里面的文字还有很多,那咱们呢,还是上代码。那这里啊,咱们呢,就把咱们这个DEMO啊,老师呢,就放到咱们的这个文档当中了。那老师呢,新建一个文件夹,比如说canvas的一个基本的使用。那当然,咱们先来第一个零一,叫做canvas的一个基本的使用,第二,HTML。那这里啊,那当然啊,咱们呢,是需要有一个HTML的,咱们一个一个来。首先说第一件事。Canvas它的这个英文啊,本身就是画布。对不,它呢是哎写一下是HTML5中,哎新增的一个特性。而且呢,是一个双闭合标签。
04:04
那咱们呢,可以看一下的卡vas can Vs。对吧,那咱们呢,先运行一下咱们的这个小DEMO,那咱们运行一下,你看它和别的标签有什么不同。那首先说啊,你看老师呢,审查到这个元素来,你看这儿首先说第一个canvas这个标签啊,它是有默认的宽和高。这和其他的标签是有所不同的。这件事要注意,那么canvas标签默认的宽和高是多少呢?是300乘150。那这里呢,要注意一件事。就是canvas标签啊,它呢是有默认的宽度,哎,宽度与高度的是多少呢?是300乘150。而且呢,这个标签呢,还有一个魅力,什么魅力呢,你看啊。老师鼠标右键的时候,你看他把canvas标签当做一个什么,当做了一张图片,你甚至可以图片另存为对不?比如说你存到桌面上,这都是可以的。
05:12
对不?所以说还要注意一件事,什么事儿呢?就是浏览器啊,哎认为咱们的canvas标签啊,是一个什么鬼啊,哎,是一张图片。对不?这是和其他标签有所不同的,这要注意一下。当然convas它只是一个标签,你可以写相应的样式,你看比如说咱们的给canvas标签写一个样式。当然咱们呢,稍微呢,清除一下默认样式margin以及。对不,那以及啊,老师呢,也给他来一个叫做covers,咱们为了眼睛能看见老师呢,给他加一个borderder,哎,一像素solid来一个黑色。
06:00
走,那咱们呢,刷新你是可以看到。对不?所以说这块呢,要注意convas,它就是个标签,你当然可以书写你自己相应的样式,这是没问题的。那这个标签呢,除此之外呢,还有一些啊,跟其他标签有所不同的地方,就比如说你看老师在这儿我想显示个汉字,叫做我爱你豪哥。那咱们保存一下,你会发现一件事,什么事,你给canvas标签添加的这个文字内容啊,根本没有任何意义,它不会显示。对不,所以说这块呢,老师呢,也做一下笔记,也就是说给canvas画布添加文本的内容是没有任何意义的,哎,没有任何意义的。那一集有的同学说老师那标签可以套标签啊,对不?那我再来一个he对吧,比如说我爱你豪哥,他也是不好使的。对不?哎,你看嘛,所以说还要注意一件事,就是给convas cn Vs canvas标签对吧,添加子节点也是没有任何意义的。
07:14
那这里呢,要注意一件事,这句话呢,一定要注意,比如说你想。操作canvas画布。对吧,比如说你在画布当中啊,当中啊,绘制图形啊,或者是甚至是显示一个文字。哎,不是问题是文字,那么你都必须通过GS完成。那也就是说canvas,你想在这个节点上,就在这个画布当中,想要完成任何操作,你都得通过GS去完成。而且刚才老师也说了,Canas,它是一个画布,一张白纸。它只是一张白纸,那比如说你想绘制一些图形啊,绘制一些其他的图像啊,OK,你都必须通过GS的那个笔去完成。
08:10
对不,而且呢,这块呢,还有一件事需要注意。卡瓦S标签的宽度。卡瓦。标签的宽度与高度或者是高度。那么务必通过瓦斯。标签的属性宽度与高度去进行设置。那至于为什么,咱们在后面会进行相应的解释。也就是说你别通过样式去设置,看vas的宽和高,是通过它的属性去设置,比如宽度,咱们给它来一个,比如说600,你可以不用写劈叉。高度,那咱给他来一个400,那你可以看一下咱们的这个画布的宽和高是不是就发生变化了。对,不但这里呢,老师呢,也做一下笔记啊,这块一定要切记切记啊,不能。
09:04
通过样去设置画布的宽度与高度。这块一定要切记。那这里咱刚刚也说了,如果你想在画布当中啊,去完成显示文字啊,显示图像啊,或者一些简单动画等等,你必须得通过GS去完成。就是必须通过这个笔才能绘制。那所以说咱们的可以给vas打一个ad啊,当然你不打也可以,那也就是说咱们的任何的操作卡,Vas的任何的操作都务必通过GS完成。写一下就是convas cn Vs convas标签的任何的操作,那务必是通过GS完成。而且通过的是什么呢?哎,通过的是GS当中的这个笔啊,毛笔这个笔去完成比哎去完成。
10:07
但是怎么去获取到这个比呢?啊,那咱们呢,需要获取到卡瓦斯这个节点。那咱们呢,可以light一个vas,对,不等于什么document.query select咱们的covers,哎,Canvs。那这里啊,咱们要获取画布的这个笔啊,术语叫做什么叫做上下文。那咱们获取一下,那这里呢,要注意canvas它是属于一个标签,属于一个节点,在GS当中它是属于对象的。那么这个对象呢?它有一个方法叫什么叫做get contest。盖是什么意思呢?是得到,Context是上下文,你需要给它传入一个2D的上下文。
11:00
那这样当这个函数一执行,会返回一个对象。那这个对象其实就是谁呢?就是咱们的这个比。啊,也就是所谓的上下文,那这里呢,一定要切记,画布当中的任何的操作都务必通过这个上下文去完成的。而且他是一个对象。那咱们呢,可以打印一下,点log cx。这个对象的身上呢,给咱们提供了很多的属性和方法去使用。对不,你看嘛,那这些属性和方法就是用于操作卡马斯画布。那这里老师最后再说一遍,画部的任何的操作,务必通过底部的这个笔去完成。而这个对象呢,给咱提供了很多属性和方法去绘制咱们的图形。比如说咱们先来第一个。你看啊,老师呢,在咱们的文档当中啊,也去做了这样的一个笔记,咱们先完成这样的一个业务,就是绘制线。
12:09
啊,这个老师呢,也给你们看一下子,就是咱们要完成这样的一个业务啊什么呢,就是绘制线段,就这。OK吧,啊,这绘制线段。那这块呢,其实呢,这个呃,康泰就是就是咱们的ctx就是咱们的。那咱们呢,可以在画布当中去绘制线段,那咱们做一下笔记,就是绘制线段。那首先说上下文,比如这个笔给咱提供了一个方法,叫做move to。这是什么呢?这个呢是你线段的起点,哎,就是咱们绘制。线段的起点的设置。当然这里呢,老师要说一下子,Canvas是有属于自己的坐标体系的啊,这块老师说一下。
13:03
这块呢是X轴。这块是Y轴,那左上角就是零,零点,所以说它是有坐标体系的。那比如说咱们绘制一个起点,它是由两个点组成的,比如在这儿X是多少,Y是多少,比咱给他来一个来个多少个100。100,那也就是说你这个起点的X是100 Y是100。以及其他点的设置,咱来一个叫做其他点的设置。那比如说一百一百在哪,在这,那老师呢,还想再来一个,在二百二百的位置再来一个对不?那其他点怎么写呢?那就是C tx.to啊叫learn to,当然其他点你可以有多个,比如咱来一个吧,一百二百。那咱们运行一下子,你看一下能看到线段是看不到的。你需要调用一个方法,叫做stroke stroke这个方法是什么意思呢?是画的意思。
14:04
所以说要调用咱们的ST方法去绘制咱们的这个线段。那就是ctx。那咱们呢,保存一下可以看一下的,咱们能不能看到一个线段是可以的。而且呢,这个坐标体系呢,要理解第一个点起点是什么,是X是100 Y是100,第二个是什么是X是100 Y是200。对不?所以说一个是起点,一个是啊,其他点起点只能有一个,其他点可以有多个。那比如说啊,老师呢,想绘制一个什么呢?想在这儿再来一个点。就在这儿,那比如说咱给他来多少呢?来一个二百一百,那其他点你也可以进行设置,比如说Ctx.learn to。对吧,比如咱给来多少呢?来一个,比如说刚刚说的二百一百,那咱们呢,可以去看一下咱们的一个线段。
15:04
对不对。对吧,哎,那当然你可以把起点和这个结束这个点给它连在一起,当然还得调用人家一个方法叫做CTS点叫C。它可以干什么?可以把起点和终点连接在一起。啊,叫做close pass,当然应该是在描述之前去调用。那咱们呢,保存一下,刷新看一下,那起点和终点是不是就连在一起了。那所以说这块呢,老师呢,也做一下笔记,这个是什么,这个呢是可以设置起点与呃,最终的结束点,最终的结束点怎么的连接在一起。那所以说你看,那咱不就绘制了这样的一个矩,呃,三角形。对不?那这里呢,要注意一件事,你眼睛所看见的,它可不是一个道,它不是一个节点,节点只有一个,只有一个看瓦斯标签。
16:07
那你眼睛看见这个三角形是什么?其实是由像素点组成的像素群。对不,它不是一个道理,咱们甚至可以把这个图片保存到咱们桌面当中,你看咱可以在桌面当中看到这张图片。对不,咱们可以打开可以看一下。对不,那所以说那咱们不就完成了最基本的绘制这个线段。当然这里老师说呀,其他点的设置呢,可以有多个,哎,有多个。那当然。有的小伙伴可能会说,老师。那你绘制的这个三角形啊,我这个线的颜色,我不喜欢这种黑色,我喜欢红色,那可不可以设置可以。那你也是需要在绘制图形之前设置它的颜色叫做fairstyle,为什么呢?比如说来一个红色read。
17:02
那咱们呢,可以刷新看一下。对吧,那当然还需要调一个方法叫做ctx点。那当然,那咱们这里面的可以刷新去看一下,那咱们这块的填充颜色是不是就是咱们的这样的一个红色。对不,所以说呢,这个是咱们的绘制线段的一个基本的使用。那当然,有的同学可能会说,老师啊,你看你这个设置的可不是这个线段的颜色,是中间这个白色填充的颜色变成了红色,那这个线呢,我想来一个什么色的,来一个骚气一点的紫色,可不可以可以。那这块老师做一下笔记,这时候是在干什么,就是设置图形的填充的颜色,哎,充的颜色。那以及你也可以设置什么呢,比如说设置。哎,设置这个图线啊,就是这个这个线段的颜色。
18:02
对吧,颜色它用的呢,也是上下文的一个属性叫做stroke style。比如说来一个什么颜色呢,咱就给它来个紫色,那这样线段的颜色你也可以设置。当然这个咱可能有点看不出来,那你可以给线段呢,设置一个宽度,比如说ctx点叫做呃,叫做NY,比如咱给他来个多少呢,来一个20。那咱们呢,刷新看一下这是不是紫色。对不,那所以说这块要注意这是在干什么,这是在设置线段的颜色以及什么与与它的宽度。对不,当然顶上是在设置它的相应的填充的颜色。对不,而且呢,老师呢,最后再说一遍,你眼睛看到的这些,这可不是道理,你没办法通过JS获取这个三角形,因为它是由像素点组成的像素群,你的页面当中它只有一个,到谁canvas。
19:07
所以说这里需要注意一下。那所以说咱们完成了canvas的一个基本的使用,就是线段的绘制。
我来说两句