00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成一个卡瓦斯的一个案例。就是绘制一个柱状图。那么所要的需求啊,在底下这里。那其实啊,咱们呢,可以看一下的这块的这个结构啊,就是这个柱状图。那无非呢,是绘制一些文字,以及绘制一些矩形,以及加上一些线段。对吧,那所以说啊,咱们呢,在绘制这个柱状图之前啊,咱们呢,把这个数据啊先稍微算一算。那这里啊,老师呢,画一个图。比如说啊,咱们有一个画布。这个画布多宽呢?比如说咱给他来一个800宽。对吧,那高度独高呢,比如说呢,咱先给他来一个400。那么在画布当中啊,它是有这样的一个柱状图,那比如说啊,他这块呢,有一个文字,那咱们呢,可以在咱们的画布当中啊,去绘制一个文字,就比如说在这里。
01:11
对不,比如再来一个字叫啥呢,叫做数据可视化。那当然啊,你需要给他一定的坐标啊,就比如说啊,你给他来个多少呢50。对,不再来一个20的位置,那绘制这样的一个文字,这是没问题的。那以及咱们再看一下子,那当然这个柱状图啊,它是有这个线的,那咱们呢,先把这个线的数据啊给他算算。就比如说啊,咱们找一个点,就比如说这吧,这个是一个点,比如说啊,它的X是100 Y是100啊标记一下,比如说100。对吧,那这块呢,也是100。那以及啊,在底下这里呢,还得有一个点,因为它得一条线啊。
02:00
比如说这个点呢,咱们是多少呢?比如说400,那400就到底儿了,咱留意这块再让他高一些吧,420。就比如说在400的位置啊,在这儿啊,X呢是100。对不,Y呢是多少呢?是400啊,咱们把画布的这个高度调一下,调成420,这样底下呢有点啊空间,那这样呢,不就有一条线了。对不,这两条线一连啊,这个稍微可能有点跑偏,但是意思一下子把这个数据给他算准。那这是咱们的第一条线不就出来了吗?分别是一百一百,还有一百四百的位置。那以及啊,看一下这那这块呢,横向呢,还得有一条线,那这条线呢,咱们也给它拉扯出来,对吧,比如说在这儿啊,咱给它拉一个。当然得拉准了对吧,啊在这吧。就比如说啊这块呢,还有一个点,那X是多少呢?比如说它宽度啊是800,那这块呢,咱可以给他来一个700。
03:04
对不,哎,700。那以及呢,Y应该是多少呢?Y呢应该是400对吧,都标价700,那这块呢是400。对不,那这是第三个点,那这三个点不就组成了咱整个这个柱状图的这样一个坐标体系吗?这不就出来了。完之后呢,咱们再看。它的水平方向呢,还有线,有几条线呢,数数一。二。345条线,而且是均分。对吧。那咱们算一下子,那首先说这块的Y是100,这块的Y是400,就是300 300呢,你要分成几份呢?你数数123455份,比如说每一份呢是60。对不,那所以说啊,你看比如说这块呢,有一条线。对不,那这再来第二条分成五份嘛,大概意思一下子对吧,三。
04:03
啊,这个当然画的有点难看啊,但是咱们把这个给它算出来数数啊,12345 OK,那咱们这块算,那这块应该是多少,这块呢,应该X呢也是100。但Y应该是多少呢?应该是在100的基础上加几加60应该是160。对吧,那这块呢,这个点呢,这个点应该是X是100。Y呢,应该是多少?再加六十二百二。对吧,那这块这个点呢,应该是100。那再加60呢,应该是呃,280。对吧,那以及这块这个点X是100。那Y呢,应该再加60,应该是340。对不,那以及右侧的这些点,那咱们看一下,这这应该知道这块呢,应该是700。Y呢,应该是100。
05:01
对吧,这不700吗。对吧,哎,700X是700Y呢,应该是100,那这块呢,应该是700。这边有多少一百六啊,一百六跟左边这个应该是咋的,Y应该是相同的160。对吧,哎,以此类推,那剩下就是七百二百二七百呢,二百八七百三百四对吧,那所以说啊,咱们去给他完成一下子走。那这个呢,是咱们零几呢,应该是零五,哎,零五绘制一个什么呢,就是绘制。一个矩形。啊,什么矩形啊,叫做柱状。叫做柱状图。行。那咱们呢,就一点点来了,盯住这个数据呢,咱们一点一点的给它画出来啊,那首先说得有一个画布看瓦。宽度呢,咱就采用的是800。高度呢,咱呢给他来一个420。
06:00
那当然为了眼就能看见咱们呢,稍微呢,还是来一点样式,清除默认样式。Marching v,以及呢,咱们的hiding。那接下来啊,那咱们呢,给咱们的卡vas啊,老师呢,先给它加上一个包的外边框移像素solid来一个红色。对不,那这样呢,咱们呢,先在咱们的浏览器当中啊,先给它运行一下,先看眼睛能不能看见。对吧,哎,这是没问题的,那咱一点来。就比如说啊,在这块呢,有一个文字叫做数据可视化,那咱们得一点点绘制了啊,虽然麻烦,但是不难。那咱们呢,去搞一下子思科rift。那当然第一件事儿呢,是获取咱们的节点。Light,一个covervas can Vs等于document的点query select咱们的covers。Cnv啊va,那以及啊,获取咱们的这个上下文。
07:04
那就是light,一个CX等于covervas,打点get contest,比如说咱给他来一个2D。那咱们呢,先绘制啊,绘制咱们的这个文本。就是呃,左上角的文本。那就是ctx点谁呀,Feel这个呃,Test。比如说咱的这个文字呢,就叫做数据可视化。对吧,X和Y咱们都来一个,比如说是50和50和20,对吧,先看好不好看不好看,咱们调整一下五十二十。对不刷新看一下。那以及啊,咱们的这个文字啊,老师呢,稍微让它大一些,那就是ctx点放。比如说咱给他来一个20像素啊,或者来个16吧,哎,16像素对吧,微软雅黑。V啊V。
08:00
软雅黑对吧,那之后呢,咱们呢,也是边调试边看一下的位置O不OK。对吧,哎,这是没问题的。那以及啊,咱们再看底下这咱们得画线了,对吧,这个数学体现你再给人整好,就比如说这个点,这个点呢,比如说X是100 Y是100,那咱开始绘制咱们的线段。对吧,绘制线段就是Ctx.move比如说100。一。以及呢,还有一个点就是底下这个点,底下这个点呢,X是100 Y呢,咱也说了是400对吧,那就来呗,CTS点,那这个呢,应该是X是100 Y呢是400。那以及咱们呢,先给它画出来就是CTS.stroke那先瞄一眼有没有这条线。对吧,那这条线得出来,哎,这是没问题的。或者啊,咱们呢,也可以把这个数据啊,往底下挪一挪,比如说这个Y吧,Y咱给他来一个80对吧,稍微往底下跑一些。
09:07
对吧,哎,就这那一截还有一条线。到这儿大概是700 X是700 Y是多少?看一下子应该是七百四百。对不,那所以说咱们这条线给它连上CTS.to应该呢是700。对吧,4万。那这样呢,咱们来看一下整体的这个坐标体系啊,渐渐的是不是出来。对吧,这是没问题的。那接下来呢,咱们呢,就得绘制这些线了啊这些线了,当然这里老师说一下子,它旁边这儿呢,还有小线,就是一百五一百二旁边还有小线,这些小线咱们就不绘制,底下这个咱绘制。好吧,这块咱就不绘制,那之后呢,咱们先看这条线,这条线的起点呢,应该是一百一百。对不一百一百,那这块呢,应该是七百一百,那咱接着绘制其他的线,对不绘制其他的线段,其他的线段。
10:03
那就是CTS点啊木。应该呢是一百一百。那一集啊,CTS点啊to应该是七版。一版当然咱们呢给它绘制出来CTS点。那咱们呢,先运行一下,先看一下咱们这条线出没出来,OK是出来了。那剩下的还有很多线,那你就无非复制一份CTRLCCTRLV。对吧,啊,咱们把第二条线给它画出来,起点呢,应该是100,呃,X是100 Y是160,那这个咱搞一下子一百一百六。那右侧呢,应该是多少呢?应该是700啊,七百一百六对吧,那这边咱改七百一百六。那这回呢,咱们呢,看一下的这条线有没有,是不是也有对吧,那剩下的还是一样接着复制。这是第三条线,那这个呢,应该是多少呢?看一下应该是一百二百二加60嘛,所以说100这块呢是220,那这面应该是七百二百二。
11:11
那咱们来看一下这条线是不是也出来了。对吧,啊,700,咱们看下这个数据对不对啊,700,呃,X是700没问题,Y是220。对吧,这块明显偏了嘛,对吧,好了,那咱们呢,这回呢,再看一下呢,是不是也出来了,那一集还有咱们接着再往底下看,是280,那这个呢,咱们呢,也给它复制一份CTRLC,这个咱也给他拿过来CTRLV,那这个呢应该是一百二百八,那这个呢,应该是七百二百八,那咱们呢,再运行一下,看一下子是不是也出来了。对吧,那以及呢,还有一条线应该是多少呢?是340,那咱这个呢,也复制一下子。对吧,一百三百四以及呢七百三百四。对吧,那咱们呢,保存一下刷新看一下是不是就出来了。
12:02
对吧,那这块呢,老师呢,为了好看一些,把咱的canvas的这个包点咱给它去掉吧,先给它去掉。对吧,那这样咱的这个整体的这样的一个效果是不是就出来了。对吧,那接下来呢,咱们呢,再算算这这是不是还有几条线,咱这个矩形先不着急看这这是不是还有几条线。那这个得算了,那首先说它呢,是有12344个柱状图,那这块的位置呢,咱得算一下子,咱这块呢是多少呢,是100。对吧,你自己想想是不是100对吧,那到这儿呢是700,那100~700之间呢,是有600的距离,600的距离呢,应该是分四份,那每一份呢,应该是150。对不,一百五一百五,那就说到这儿呢,这块的距离是150,这也是150,那应该是在100的基础上加150,应该是250,对不?那咱来在这搞一下。
13:01
那这块呢,是绘制什么呢?就是绘制水平轴,水平轴哎,底部的线段。再来吧,CTS点木。那这个呢,应该是X是250,呃,算一下子X是,呃,就比如说这是150,一百二百五,那Y呢,应该是400出头,那咱就来个400吧,哦,或者是想想就400吧。对不,那这呢CTS.to那这个呢,应该是250。对吧,410。那之后呢,咱们呢,给它绘制出来CTS.stroke那咱们先看一下能不能看见。刷新应该多了一条线。对吧,你像这块是100,那这块是150,不就250,二百五在400的基础上再往Y多一点,是不是四百一对吧?那再加150,那这块就好整了,再加一百五呢,应该是起点终点,那都加上多少呢?加上一百五不就行了吗?那就是400。
14:01
对吧,那这块呢,也是400。那这样呢,咱们的第二条线是不是也就出来了。对吧,那接下来呢,咱们再来,那再加150,再加一百五呢,应该是多少呢?是五百五对吧,那这块改一下子550,那这块呢,也是550对吧,那这样这条线不也就出来了。对吧,但是呢,要注意一件事啊,它这个左侧和这个底部这都有文字,那文字呢,咱们也得先搞一搞,对吧,得算一下子,你看比如这是100。100呢,比如这块是20是170 170,呃,这边再来20是190,一百九剩,呃总共是多少来着,150 250 250,比如说减去一百四剩110,一百一的一半是55。嗯,这块咱还真得算一下来看长。就是底部的文字,底部的文字咱一会儿左侧这个文字也要整出来,先算这的。
15:02
呃,他们应该是居中啊,应该是这块的居中,那就比如这是100,这块是20。嗯,一百二一百二呢,这块呢也是20 140,一百四呢,还剩110,一百一呢,除以二是55,那也就是说一百二加55应该是175。对不?那咱看看大概位置CTS.feel test。对吧?I比如文字呢,咱们看叫什么。这个呢应该叫做食品,那咱来一个叫做食品。对吧,食品之后呢,它的X呢,咱刚刚算是120,一百二再加55 175,咱就一百七吧,170。之后呢,Y呢,应该在400的下面再来个410。对不,那这样咱们呢,先稍微看一下子能不能看见。对吧,哎,这是没问题的,咱们再往底下挪挪吧,415吧。对不,那这样咱们再调一下子,看一下子是不是差不多对吧,除了食品呢,右边呢,还有个什么叫做数码,那数码呢,你就加上一百五不就完事了,对不?那这块呢,咱给他搞一下子就这。
16:10
这个呢叫数码,那这个咱也改一下叫数码。那加上100,呃,数码加上一百五呢,应该是320。对吧,320,那看一下子是不是差不多。对吧,哎,差不多三百二的,其实你也可以再往这边调的,这个数据都可以调310。对吧,让自己看的更舒服一些,这个数据自己去调调。对吧,哎,这回差不多这么再加150,再加一百五呢,应该是多少呢?应该是这个460,那咱就来个四百五吧,哎,差不多就行,那这个呢,应该叫做什么呢?这个应该叫做服饰啊,这个咱改一下叫做服饰对不?那这样呢,咱们呢,也去瞄一眼看一下呢,有没有OK,那这样呢,咱们呢,再给他再来一个,还有一个叫什么呢?这个咱们再给他来一个看下叫啥。
17:04
这个呢,叫做箱包啊箱包。哎,香包。肖。箱包对吧,再再加一百五呢,应该是600对吧,六百四幺五,那这回再看下这个文字是不是也出来了。对吧,那以及啊要注意,以及它的这个左侧也是有数字的。对吧,分别是一百五啊,一百二九十,60啊30,但是都是文字啊,都是文字,你要注意咱们的呃,画幅的坐标体系的00点在哪在这儿对吧?这块只是展示的一些文字,00点可不是在这儿,画布的零点不是在这儿,在哪在这儿。对吧,那这块咱算一下子啊,这个咱一个找先找顶上的第一条线就这。那这块呢,就来一个CTS.test。这个呢,显示的文字呢,应该是150。对吧,X咱们得算一下子,X呢,应该是在100的旁边,那咱就来一个70。
18:03
对不,那Y呢,咱就来个一百一对吧,在100的基础上往底下一丢丢,看一下子能不能看见。对吧,哎,差不多那之后呢,还有其他的150,他应该是接着应该是减多少,减去30应该是120,那一百二咱往这儿也复制一下,这个呢是120,那这个呢,应该也是70,那这个呢,咱就来一个170。对不在一百六的基础上多出十嘛,对吧,看一下子是不是在这那底下呢,这块应该是90,那90咱也来一个CTRLC。对吧,这块再给来一个,这应该是90。那这个呢,应该是70,那这个咱就来个230 230,那这回看一下是不是也有。对吧,那以及底下呢,还有两,那这个咱也复制一下子,这个呢,应该是多少,这个呢,应该是60。对吧,60,那这个咱就来个290。
19:00
对吧,那往底下瞄一眼是不是就出来了,以及还有30和零,那这块咱也搞一下子30和零。这儿就是还有一个呢,是30,那30呢,咱就是70这个三百五吧,350。呃,三百三百五对吧,那咱先看一下有没有。OK,以及这块呢,还有一个零,那零咱也得推算一下子,那这咱也来一个CTRLCCTRLV,那这块呢是零,零呢就是70,再加多少呢?加咱最开始算的是多少来着,是六十六十,呃,再往底下来个四百一吧,哎,4410或者400吧。看一下O不OK,那零是不是也就有了。对吧,所以说咱们整个这个柱状图的结构,那这不就出来了,但它这里面呢,是要绘制什么呢?绘制矩形的,那矩形呢,老师呢,就绘制一个就行了。好吧,这个咱四个就不再一个一个绘制了,你看这个矩形呢,一定要注意。
20:02
你这玩意00点在哪呢?老师再说一遍,00点在画布的左上角,这块要注意。对吧,你看老师呢,给他来一个包胰像素solid,再来一个红色。这块呢,一定要注意,咱呢是要在哪在这儿绘制一个矩形,但是你要注意这个矩形的坐标题是谁呢?是左上角这个00点,这才是零零,所以说咱们得大概能算出它的这个位置。这块呢,你得大概算一下子。就举个例子啊,比如说呢,咱来一个X是多少,那X这块是100,比如说X咱来一个120。对不?那Y是多少呢?Y比如说整个画布的高度是400 400呢,比如说这块呢是120。呃,咱先画一下子吧,试一下子来看这。这得自己算的对吧?绘制矩形那就是CTS.few说,呃,叫做few。Racked。那这个X呢,咱给他来个120,但是你要注意啊,那也就说在大概是在这个位置,这是X。
21:07
那Y是多少呢?Y呢,比如说一共高度是,咱就假如说420,顶上是120,那底下还有300。对不,那咱来一个吧,不是300,咱看这啊,从这到这儿的距离是100,从这到这儿呢,应该是20 120 120,比如这再留100,应该220,二百二应该是200,对不?Y咱给他来个200。之后呢,读宽呢,宽度呢,比如说呃,咱也可以算一下的,比如这块是120,呃,这块是20,这块是20。嗯,一百五减20应该是一百一对吧,宽度是一百一对吧,高度呢,咱给他来一个200,先看一下有没有位置是需要调的。对吧,大概不就这个意思对吧,所以这块呢,要注意X是一百二啊是120,看这Y是多少,Y是200多宽,对吧,看一下子宽的是100,高是200,老师为什么选的200呢?你琢磨琢磨,你看顶上这这是100。
22:04
这块呢也是100,这是200,底下这是二是220,四百二减去二百二是不是就剩200对吧?当然咱的颜色呢,喜欢的是红色,那咱来一个CTS点。STEM来个什么色,来一个red红色,当然还有其他的三个矩形,其他的三个矩形呢,你也需要咱们需要自己去算一下,但是一定要注意坐标体系是左上角零,零点。好吧,这块一定要想明白,因为这块的距离是20,顶上这是100,怎么去算,那这块呢,一定要去算一下。好吧,所以说这样呢,咱们完成了咱们这样的一个柱状图,利用canvas,当然你可以图片另存为存到咱们的桌面当中,它就是一张图片。对不?所以说呢,你看咱们呢,可以在桌面当中去看一下的,那这不就是咱刚刚绘制的这个柱状图吗。对吧,好了,那这是咱们利用canvas完成了这样的一个柱状图的业务。
我来说两句