07_尚硅谷_h5_canvas-绘制矩形.wmv原创

点我们讲什么绘制矩形啊，OK，那绘制矩形这一块首先抛给大家一个概念给我，记住HTML中的camera只支持一种原生图形的绘制矩形，也就说你调一个API，你在开va式里面，通过调一个API就能画出来图形只有矩形。其他的图形都要调路径的啊，你给我稍先稍微有一个这概念，就是说你在看完之后画任何图形，只有矩形你是调一个API就能出来。其他都不行啊，OK，好，那所有的其他图形的绘制都至少需要一条路径，那绘制矩形开式当中提供了三种绘制的方法，以及这三个API都是用干嘛？画矩形的，我们来看看。OK 02CTRLCCTRL绘制矩形。好，祝你。

好，比如说现在我们拿到了画笔是吧？OK，然后咱们去绘制矩形，怎么绘制，调哪个AP啊。Feel嘛，是不是，而且咱们现在遇到的所有的API是不是都是在这支画笔身上呢？是不是只遇到过一个API是在这个画幅身上的是吧，这样吧，我把这个画幅小点，实然你。Can。Vs cvas，这是画布，CTRLCCTRLV啊，我不写它的是吧？记住现在咱们只遇到了一个一撇l get是在画布上面的，其他的一暂时都是在画笔身上的，对，不懂拿到这个画笔是不是得去画东西啊，他点什么？是吧，让吗？穿几个参数四个说吧，偏一辆尺寸。

是不是来看一下为什么零零干么一百一百这个零零参考是谁啊？前面是不是代表XY偏移量参考是谁啊。啊，记住是画布啊，是画布的左上角，而不是我们页面的左上角，给我搞清楚啊，参总是画布的左上角，OK，比如这个嘛，我让你稍微有点偏移，懂吗？是不是加单位了，你看我加单位了吗，叫你。有吗？啊，加加单位行不行，试一下，我还没加过单位。是不可以啊，干嘛不能加单位啊，OK，我们注意个嘛，不加单位好，这你再看现在我是不是只掉一个API就出来一个矩形算一下是不是，OK，这在看们中唯一画矩形是可以这么做。

懂吗？OK，这里那们说这是我们画的一个填填充的矩形吧，是不是？OK，我们说这第一步我们画的什么填充的矩形，还能画什么带边框的矩形怎么办？Ctx点什么均什么是吧？OK，我们做什么？比如说让它移么一百一百这个位置，画一个100乘以100的矩形可不可以啊，那是不是就干嘛？接上来了是不是，那我就问你这个边框的宽度到底是多少。你有指定吗？没有，那默认这个宽度应该是多少？啊，其实规范上面也说的是EPX是不是啊，可是是有问题的，我们先来看看。OK，大家看，现在我打开我的。飞秋啊，我打开我的。我们来看一下这个边框的高度和宽度到底有多少啊，这边的话我们可能会涉及到一个开发是这样一个画矩形上面的一个问题。

好，看一下我截图的热键应该是CTRL加Q，我记得。OK。好，我来截个图，CTRL加Q好，这里。编辑图片OK，确定完成是吧，然后干嘛？啊，得卡一会儿。好，怎么去快速打开面板，CTRLL再加N吧。OK，确定好CTRLB好吧，是不是上来了，OK，我们找到我们这个放大。放大在哪，我又忘了。啊，这个是托的是吧。放大是不是啊，不是啊，这边是吧，OK，给它放大。

是吧，OK，很很明显的看到几个项数，两项数吧，是不是好，可是规范上面明明确确说了。啊是一像素变高，而且大家来看是不是有一像素跟这个。黑白是叠的，其实他是怎么画的，我们说是不是在一百一百这个位置去画一个。以下数的边框是不咋画的，100 100的位置在哪这边？懂吗？这个是100，这条线也是正儿八经的100。好，他确实是换了。一项数的边框怎么画这一项数的啊，上面画0.5。下面画0.5，这边画0.5，这边画0.5懂不懂？它确实是一项数边框，可是最终渲染成了。

两项数啊，就什么三三里面支不支是小数。看一看我说吧，实验三题当中什么小数？好，这是一个比较大的问题，小数周啊，比如说干嘛我来一个div是吧，ID叫做test啊，还是一模一样啊，Style啊，新干掉啊，把可以干掉的全部干掉好，然后干嘛我们来画一个D啊，就给这个D吧，那个Y为100PX是吧？S也为100PX啊，我们给一个边框拨的，比如说给0.5PX的实心是不是0.5吧？OK，我们来看一下啊，只有你。

是不是在这好，那稍微稍微有点偏移。所OK下来，是不是我们画的是不是00.5的变化，好编辑图片确定完成，OK ctrl al加NOK，打开这个面板，CTRLV上来大家看。几项数啊，一项数完完全全的一项数，不可能是0.5项数的，就在CS当中，你写小数它都会进位的，你写0.5，那就两项数，你零点，我那就是一项数能不讲，OK，那我们说哎，那我问大家，现在我们画出来这个边框几项数？两下说你要换一下怎么办？刚刚说了点都是一，是不是你换你在这边把这个变化调成行吗？上面画下面话，那还是一样是不是怎么办。

这不是偏移位置吗？是不是，你如果是100的时候，问你这个变化是从哪到哪。如果是的时候，你这个边框是从哪发起的到呢。到100.5，其实最终就是什么99~101。是不是你想画个一下边框咋整，你如果是从什么，这个是什么。这个是你如果拼音量是什么，100的时候吧。是不是找你OK，那我们说这边要怎么办，如果你的平均量是100.5个点。OK，从哪开始画100.5往上点五吗？100到哪边到1000，这是不是一个一下水平方。

这才是真正的一项主平方吗？我们看看嘛，100.5是不是这你100.5刷一下，OK来看下，这群明显要干净来看一下。可票价Q。截个屏。完成，那去我们里面CTRL2加N。CTRL完好来看几项数，你看这一项数正正好好是干嘛叠在这个立项数平方吧。那讲就说你要掌握开发画这个边框的一个规则，他怎么画呢？在这个偏移量处怎么办。往上画点像素，往下画点像素，而且又因为我们的C当中不支持啊小数，所有小数都会向上取转。化成整数的懂不懂？所以说你想让画一个一项数的边框，你必须在这个偏移上面带小数。

能不能讲OK，如果是问你如果画个两下数边衡的话，需要你在这边做这个调整吗？两项平么干嘛往上一下往下下板正好的吗。啊。能理解我的意思吗？OK，好，整理好，那我们说吧，那我们说这边什么画矩形上面需要大家注意的问题啊，OK啊，这个可能是在我们最简单一篇里面学大家去注意的问题啊，关掉。好，那我们再往下看，好，这里再往好，我们说画句型，我们讲了两种，一个是非，一个叫个什么吧，是不是还有一种画句形啊，大家因为一直以为它是橡皮擦。是不是记住它不是橡皮擦，它没有擦掉，它就是在上面给你画了一个底色一模一样的矩形，我们来看一下这里CTRLC。零二举行不032。

好，我们可以来看一眼，好现在我们是不是来看，现在是不是画了两个曲线啊，比如说我再来干嘛，Ctx点什么肯定啊。是不是我还是去这个一百一百这个位置画一个100乘100的矩形啊，我来问大家好，我问你。好，现在页面上应该什么样的，就是会有一个填充的矩形，没有毛病，是不是他们俩是不是合到一块的，我问你这个图形有没有被完全覆盖掉。这个图形有就问你，我们俩是位置是不是一样的，都是一百一百个位置，画100乘100的矩形，是不是一个是填充的，它其实也是填，它也是填充的，他只不过填，填充的是你整个全局的媒体色吗。懂吗？也就是说我们这边什么粉色嘛，真的，可是我问你这个边框有没有被全部擦掉。没有，应该剩下来什么？以下是边框，这你看。是不是干干净净的相处嘛，你看如果如果我没有干这个事情，大家看这肯定是啊。

两下手表吗？懂吗？这样也可以一下说懂，可是你知道他是去擦的吗？不是，它是画了一个底色一模一样的矩形在这边，你要擦的话就干嘛擦成白色，懂不懂？记住它是一层一层叠上去的，这样有什么好处？不会发生重未重排吗？我一层层叠的嘛。是不是啊，那为什么说开发式的性能高，在这在这个上面能不能体现啊，记住开发的性能是极高的。啊，开发式的性能是极高的，懂不懂啊，从这个上面也能体现，因为我是画了一个图形一层给你叠上去的嘛，我没有把你上一个给你擦掉，只是我叠叠了一个距离上去，不懂，而且他这个叠消耗的一个性能特别低，懂不懂啊，这是刘下器内部自己自己去啊做一些控制，你们不需要管懂不懂，你要知道开放式的性能极高，OK，那我们说这是我们画矩形的三种划算。

是不是OK？这三个API比较好记，都是在谁身上的？看法是画图上的吗？不是在画笔上的，而且我们在画。矩形啊，C当中唯一支持的一种元素图形就是矩形，调一个API就能画是吧？你看我们到现在是不是一直在调一个API就能画啊，这前面都是什么初始工作吧，那你看我是不掉个一片画个，取掉一片画，取掉一片画曲线懂不懂？OK啊，这这是第二个点，好，我们再来说，好，那当然这里面参数XY代表的什么偏移量，可是际知这个偏移量参照于谁，参照于画布的原点，而不是参照于你整个网页的圆点，懂吗？好，而且这个Y跟head的是设置矩形的尺寸的，好同时画边框的时候有一个一下的问题。啊，就是画什么string RA的时候，你要知道知道它有一个一项素的问题啊，你就知道这个边框到底怎么去渲染它懂不懂，在你偏移量这个位置往上画点，往下画点，又因为C当中不支持小数，所有的小数全部往上取整，最终导致我们画出来两项数边框，你想画出来一个一项数边框，第一个你可以选择调整。

偏移量第二个，你可以选择填充一个跟背景一样的矩形上去。能理解我的意思吗？OK，那这是在开发中是大家需要注意的事情，好了，第三点大家看我们讲到现在的话是不是，你看我们说我们能画填充的矩形，也能画带边框的是不是，可是我们指定不了颜色，也指定不了边框颜色。也不能，也不能，也指定不了边框的大小是不是，而且我问你现在我是不是在画布上面去画图西啊，CSS有能力去拿到画不上的东西吗？你看这边。

你选择去这咋选啊啊，你告诉他，哎，我这个test是元素吧，好，你test正常的矩形。你疯了是吧？记住，开画布上的内容你通过没有办法拿到。你说任何cameras上面的图形，它的样式啊，都应该通过cameras的API来处理。CSS没有能力去介入。理解我的意思吧，能不能，能不能，能不能理解我的意思啊，CSS有能力介入的只有一个，开本身这个画布，画布上的任何元素，首先开发CSS拿不到，其实D也拿不到。等等，那至于哎，我怎么去画抵扣，我开发自己的API是比如说看我们来看下面这个API代表填中。颜色是吧，来看一下，给来看一下，好记住这个填充颜色相当于给画笔去塞颜料。

能吗？他是画笔身上出现掉等什么，我们喜欢的第趴啊，我喜欢的是不是走你第发是吧，这个时候你画到上去就应该是一个。身份是不是的，记住，而且我这个fair是填充颜色，你去填充举行的时候才能用你划线我。他能用吗？不能用，而且你这个arrive填充的跟他有关系吗？没关系，你这个clean arrive填充的永远是你啊底色。能解吗？啊，这个feel style是给我非去用的，任何跟有关的API就应该要听他的，懂吗？再来看还有什么？String刚这哎，你画线我给你填充什么颜色，相当于我这支笔很高级，我有两个孔，一个孔熊来填充的，一个孔熊来画现的是吧，好一个孔里面我填了一个深粉色，另外一个孔里面我再来填C什么个掉等什么啊PNK就看不到了，红色吧，我啊我我底色是灰色是不是。

好，这里你看是不是一个红颜色，是不是OK，那我说这个边框的粗细我应该也能控制吧，是不是标什么。啊，这什么棱线的什么宽度嘛，是不是也是画笔上的，懂点棱等于什么十撇X这零。一我们说不能加单位。这里有没有看到。是不是大了，而且这个大是往上走五项数，往下走五项数。是吧，比如说我再给大家。是不是往上走20往上走。这个能不能理解啊？OK，终于啊，这个红色怎么那么辣眼睛啊？

换一个什么PI。好柔和一点嘛，是啊，OK，那我们再来好，可是这里面也有一个点啊，我们说什么人外这个属性值设置当前会线的粗出现吧，必须为正数啊，OK，呃，零啊，负数啊，你分啊，N啊都会被忽略，默认只是啊。一项数OK，可是大家看啊，如果我说哎，我说之前我们在写DS的时候，这些东西啊，写到下面去有没有影响。没有影响，你说你画成什么样的颜色，画多少粗细，如果是按照你们之前的逻辑，有没有影响？为什么会有影响？嗯。为什么会有影响？比如说干嘛，我这样是不是一个脚本，哎，我们之前怎么测来了window点的是不是啊，等于一个方形是不是可以，比如说我拿到这个，现在我是不是可以直接拿是不是OK我们干嘛。

嗯，比如说我们这样，现在我们页面是没有这个没有D的是不是OK，我挖一个什么test等于什么多的点create c，我创建个点吧，是不是我再给这个点什么test的点ID等于什么test是吧，这个时候能不能画出来。没有。没有喷的吧，现在我只是去创建那个吧，是吧，我说我多点什么，我点喷的，把这个干嘛塞进去找你CTLS是不是它也是有的啊，那问你那我在塞进去之后，我给你去改的吗。

赶紧的，比如说一开始我有个背景是吧，比如说在这边我什么点么点什么等于PI，这有没有关系啊。这个东西我写在哪是不是都没关系的，我写在上面行不行啊，当然你要写在这什么这个里面了。这有任何关系吗？没有，我们说为什么我们说的GS的执行速度啊，极快吗？你渲染的速度是不是很慢，也就是说其实你读到这一行的时候。问你，我这么写，你读到第30的32行的时候，我有去绘制吗？没有呢，能没讲到这边，最终去绘制的时候，我告诉你我的背景是一个颜色吗？懂吗？OK，那我们这个能懂，这我们之前干嘛讲过吧，可能借切记看不一样，想想我们说看，如果这些东西写在下面我们读到，好，如果看是画不上元素，还没有绘制，那都没关系。

是不是绘制的时候我告诉你了，生粉粉色？50嘛，可是我们说了，开斯性能极高。啊，他这个绘画跟我们浏览器绘画机制不一样，就是开放式，换不上自己的绘画机制。懂不懂这个时候是没有任何效果。你必须要把它写到上。也就是说你在思考开va的绘画的原理上面的时候，跟我们浏览器的绘绘制一样吗？不一样，浏览器是浏览器自己的绘制啊，模块开马是开自己的绘制模块。懂不懂，而且canvas的绘制图形的模块，因为他管的东西少嘛。我只管我看完时画布上的东西嘛，不像浏览器要管那么多东西吗？是不是我看完时我只我只要去画东西就行了，需要管什么，要去加载资源什么什么鬼的吗？不需要管，所以他妈他只注重于绘画，所以它性能极高，你说你在这边44243444，你在这边就告诉了我什么。

我是这种颜色吧，我到18号我还没执行完，就你告诉完他就已经画完了。懂吗？OK，然后然后你说什么，你在下面再去直接直接东西，它有用吗？没用，你在画的时候，你上面是什么样的颜色，那就是什么颜色，默认是黑色，那就是黑色，懂不懂，OK，切记我们说考虑开发的时候，要把这个思维要不要转换一下。要从之前异步的思维转成。同步的里面所有的东西都是。同步的所见即所得，懂不懂你在执行第48号的时候，前面是什么样子的，那我执行的时候就是什么样子。等懂，千万不要把我们之前思考什么原生CS，原生时候那那一套再带到开发里面，不行的，你看你这个吗，你要根这干嘛画不了了，在开里面必须得有个什么。

同步思想啊，这是比较难的地方啊，你做开发干嘛必须给我带同步思维，OK，有别于什么。有别于浏览器本身的渲染器，OK，这个是需要大家注意的，懂不懂好这一点如果你过不了，我后面几节课你没法听，懂不懂你如果这一点你能过过去，把这个坎过过去，那看法式就很简单。啊，可是你这个坎你过不去，那看你画不了啊，切记把之前我们讲的那一套关于异步的东西，虽然说没有跟你们很深的去去说这个异步啊，可是你也知道在我们浏览器当中去绘制图形的时候，其实它是有延迟的。懂不懂，你说你JS的读取速度极快，可是你绘制其实是在码之后一段时间就绘制了，懂不懂camera当中不一样，读到了就去换，读到了就去换，机极的换能理解吗？OK，那这那这个是我们说也就这些样式，你样式上的空制必须写的前面，而且这个样式只能通过开本身的API控制，不能通过什么CSS，你通过CSS只能控制。

画布OK，不能控制画布上的元素啊，那讲到这块API不难，思想上面有点难。啊转过来好，我们再来看，那当然我什么我们是不是刚刚讲的这三个API啊，是不是OK，那说它还一个覆盖渲染的问题啊，这个问题我们看一下吧，什么叫覆盖渲染，你看我是不是先画的标的，再画的线啊，你看这个线盖在上面是不再看如嘛。如果我先画边，再画线，走你。

那干嘛？谁不该这样？边是不是就覆盖了，因为你刚刚想实现那个一项数的话，这个东西是不是必须必须写在最后面，不然你是覆盖不了的吧，找你来看一下。这里你看这里面是不是就多了25。懂吗？其实我们刚刚看到的都只是边框的一半，为什么只有边框的一半当中这一块干嘛被它切掉了吗？对，不懂，还是这样同步的。是不是才会有这个覆盖渲染的问题吧，就你执你你执行完他就已经画完了。懂吗？那么理解啊，其实思考看法应该比较简单，同步是什么？没有任何其他的异步思想吧，怕是怕那些学的好的已经有了这种什么异步的思想了，再来画开马的时候他就比较烦了，因为一步同步它需要切换吗？是不是，那前面都没学会的过来听啊，机器束缚同步是什嘛，所键你所得嘛，是不是？比如说干嘛我说你这边没有指定，那你画的就没有颜色指定了。

那就有意思，继续简单吧，懂不懂？好，那最后一个什么。人join这个代表什么？样式什么样式，OK，我们说什么，如果你是这个玩意儿，来看一下。好，这里大家看没看到这边是不是就被切掉了，比如说这个东西要干嘛。颜色我不去填充了，是不是这个我也。不去了，人外是不高，小一点十P。嗯，是标是有点小，就搞个25片嘛，这点大家看这是干嘛被切掉了，这个你看join join嘛，这个代表什么，你线跟线的连接之处。怎么去展现这个代表干嘛？斜角，那我们可以把它变成。圆角干嘛？Rou再来看一下。

刷一下，那就是圆角是吧，当然还有什么。直角问句么？直角吗？是吧，记住它是跟线有关的吧，跟你的填充会吗？跟你的填充有关系吗？没有任何关系啊，比如说干嘛你说让它变成圆的，你看我的。填充，填充这几个角没变成越大，没有，这跟现实有关系了，懂懂，OK，那我们先讲到这块啊，讲到这块啊，记住我们都说了些啥，其实我们就说两样东西，哪两样东西啊，基本用法跟绘制矩形，那绘制矩形里面，OK，我们在这边提了一个很重要的概念，同步的思想，开过程中一定要给我考虑同步的思想，对不道，那从下节开始的一些东西就比较难了，OK，那自己注意一下，OK，大家先下课啊先。