00:00
哈喽,各位小伙伴大家好,那接下来啊,咱们呢,去学习一下子如何去清除画布,以及呢,如何在画布当中啊去绘制文字。那咱们呢,再来一个DEMO,那这个呢,咱们也给它起个名字。叫做零几呢?叫做零次,叫做清除画布,清除画布与绘制文字。那当然啊,咱们呢还是需要有基本的骨架,那这里的样式呢,咱们呢还是稍微写一下子。那最开始啊,老师呢,曾经说过一句话,就是画布的这个宽度与高度是通过看vas的属性去设置的,对吧,千万别怎么的,别通过样式去设置,那在这里呢,咱们也说说原因。
01:00
那这里啊,那咱们呢,先写成属性,比如说啊,给他来一个600。以及啊高度呢,咱给他来一个400。那以及为了眼睛能看见咱们呢,还是稍微呢,写一些样式,清除默认样式Mar。以及咱们的paing为零,那当然啊,给咱们的这个convas啊,给它加上一个这样的一个外边框border移像素。Solid,来一个黑色吧。那咱们呢,保存一下子,回到咱们的浏览器当中去预览一下。OK,这是没问题的。那咱们呢,先在咱们的画布当中啊,去绘制这样的一个矩形,OK吧,矩形的绘制呢,咱们呢已经学习过了,对吧,那咱们呢,也去搞一下子。那就是获取到节点,哎,获取节点,那咱就let一个S等于document的点,Query select咱们的convas canvas。
02:08
那一节啊,获取咱们的上下文啊,也就是咱们的这个笔。那就light一个ctx等于咱们的canvas的一个方法get contest几D呢?2D。那咱们呢,先学习一下子这个绘制啊,绘制矩形啊,矩形咱们已经绘制过对吧,比如说Ctx.feel谁呀,Right填充形式的矩形。比如说啊,咱们呢,给他来一个小坐标吧,就比如说啊老师呢,想在这个位置X是100对吧?呃,Y呢,咱给他来一个200吧,整个100宽200高的这样一个矩形,也就是说X是100。距离Y轴呢是200,宽是100,高呢是200这样的一个矩形。
03:00
那咱们呢,可以刷新看一下,这是没问题的,对吧,那咱们呢,先说第一件事儿,就是为什么画布的宽度和高度务必是通过属性完成。而不是通过钥匙。那虽然说有的小伙伴可能会认为啊,说canvas是一个标签,那当然它的宽度啊,哎,当然可以用样式去搞,比如说咱还是600。高度呢,也是400说老师,那这样的效果跟刚刚所写的不应该是一样吗?那这里呢,你可以看一下坐标体系完全发生变化。对不,它程序是没有问题的,但是你整个坐标体系是有问题的。你看比如说老师给他来一个,我给他来个零零。100宽100高,你看这个矩形明显不是咱们想要的。对不,所以说呢,这里呢,一定要注意一件事,就是咱们的画布的宽度和高度,务必是要通过属性去完成的。
04:00
千万呢,别去通过样式去设置,如果通过样式设置啊,咱们的坐标体系呢,会出现一些问题。而且咱们绘制的图形呢,也会出现问题。对吧,啊,这是它,所以说呢,一定要切记一下。那当然,那咱们接下来呢,先学第一个就是什么呢?清除画布,哎,清除画布。什么叫清除画布呢?就比如说啊,咱们呢,目前啊,在这个画布当中绘制了一个矩形,我想把整个画布给它清除,那也就是说这些你绘制的矩形就让它消失。那怎么清除呢?很简单,上下文给咱提供了一个方法,叫做clear right。Clear是清除,RA是矩形,它们也是需要四个参数,XYWH,比如说老师呢,从00点开始,氢清多宽呢?600宽,清多高呢?400高,那也就是说整个画布都会被清空。
05:00
对不?那当然有的小伙伴可能会说,那老师我不把整个画布清空,我只是清空某一部分,哎,就比如说我要清除这个矩形的这块左上角这里,那可不可以呢?可以,那你得算算了,你清的时候X是多少,那是100 Y是多少,200轻度宽,100宽,比如说100高。那你可以这么清,怎么清,就是Ctx.X是100 Y是200轻,100宽,100高,那你看咱们的这个矩形清完之后是不是变成了这个样子。对吧,当然说那咱们的这个宽度啊,你可以清50,那50不就是矩形的一半。对不,所以说呢,这叫什么,这叫做清除画布。那当然。老师呢,还想做一件事,什么事呢?就是在咱们的画布当中啊,去绘制一个文字。咱们呢,从最开始到现在,从来没有在画布当中去绘制文字,那这里啊,老师呢,也做一下笔记。
06:06
那这个呢,是清除画布,是整个画布,哎,写一下。整个画布啊被清除对吧,那这个呢,只是清除部分画布啊,清除部分的啊部分的这个画布。那以及啊,咱们再学习一个,比如说啊,叫做绘制文字在画布当中。当然也是需要通过笔的一个方法去完成的,就是ctx点,叫做F填充文本test。第一个参数呢是什么?是你要在画布当中绘制的是哪一个文本,比如说咱们来个叫做数据啊可视化。当然咱们先运行一下子,你看一下能不能看见文字是看不见的,为什么呢?因为你需要给它设置这个文字的位置,X是多少,Y是多少。
07:01
比如说咱们的X呢是50 Y呢是20,对不?那你就可以在画布当中看见这个文字,当然有的同学可能会说,老师这个文字好小啊,那当然咱们呢,可以设置文字的字体对吧?哎,设置文字的大小。那也是通过上下文CTS点放。对吧,字体多大,比如说20像素什么字体的,比如说微软雅黑。那咱们呢,可以保存一下子来刷新,你看一下子咱们的这个文字是不是就变大了。对吧,那当然有的同学可能会说,老师,那这个文字的颜色啊,我不喜欢黑色,我喜欢红色,那可不可以啊,可以就是Ctx.feel style,比如说咱给它来个。对吧,那你看一下子咱们的文字的颜色是不是就变为红色了。对吧,所以说呢,咱们要学习了一下子,呃,这个清除画布,以及在画布当中绘制文字,当然还有一件事很重要,就是画布的宽度和高度务必是通过canvas的属性去绘制的。
08:11
如果是通过样式去设置,那当然咱们的整个画的坐标体系啊,以及绘制的元素啊,绘制的这些矩形什么的,它都会出现问题,所以说这里需要注意。
我来说两句