06_尚硅谷_h5_canvas-基本用法.wmv原创

啊，这节课开始，咱们继续要梳理体系啊，我们说今天是我们的。啊，不知不觉第九天了吧，是不是感觉日子特别快，是不是好一眨眼你们就要毕业了，你不要真的就是很多同学在毕业的时候他都没感觉，诶，好像还没学到什么东西，怎么就毕业了啊，不是什么，不是没学到什么东西啊，是你学的都忘了啊，所以说每天早上你给我过，到了到了后期你们更痛苦啊，你们要过框架的1PI，那你想想每一次过都跟心都跟干嘛，就跟心学历是一样，因为不熟嘛，懂不懂可是你一个点让你去看的话，你花个半小时你肯定能看懂是不是，可是让你整个把体系说出来，够呛。是吧，所以说一定要现在你们一定要训练自己，为什么这么去训练自己，对你们面试是有极大好处的啊，一个有体系的人出去面试跟你没有体系啊，虽然说我东西学会了啊，你让我干活我能干，可是我就是说不出来，那不行的，工资要不上去了，能没讲，OK，那我们第九天啊，第今天跟明天我们会把整个开马斯的所有的东西啊，基础上的东西啊，会跟大家去搞，搞明白，然后我们来说一下开马斯在我们实际生产中的一些运用啊，OK，那课件都在这边啊，这个笔记上面的话，我做了一些调整啊，OK，因为有差慢的有什么。

马克当瓦啊，我可是我分门别类的把他嘛归起来了啊，那这是我们开马斯的一个课件啊，看马斯我们从基本用法开始讲起，讲到它最终合成啊，再讲一些它一些事件操作啊，将画讲什么将化物的这些图像，以及开马斯跟这个音视频标签怎么去什么结合起来啊，所以我们都会去讲，那看尔达应该之前有接触过啊，所以他基本的API呢，应该比较熟啊，可是这边我还是需要，因为要给你们整个体系嘛啊，所以说我还是帮你们过一遍啊，OK，我们来看一下。

好，我们从开的基本用法开始啊。讲起啊，那我们来看好，这其实也是我们H5里面的一块内容，那这样吧，我把我整个H5这个东西还是贴过来。OK。一零。好。嗯。啊，这个物流好像稍微稍微有点复杂，那我就不要这个。啊，你们知道我现在在讲H5就行了，OK，好。其实今天我们一直在讲开发式，OK，我们来看一下。好，第一个吧，零一还是讲这个跟着我们的课。课进来，基本用法好，回忆回忆啊，基本用法回忆回忆，你们学看法斯，你现在还能啊，看法斯基本IP你学过了，你还能回忆出他几个题啊。

啊，就是你现在能回忆出康老师的几个。一个都没有，一个都没有，最起码那只画瓶得拿到他吧，画笔什么方法完蛋玩意儿啊，你给我说英文，你给我说API，到时候会查啊，看一下你确定你不爱说中文啊，我来看一下啊，基本用法这块我们说你。啊，这次讲完你必须把它整理好了啊与开法是的，初次实验开的，初次邂逅是不是走你啊，我们说开默认是不是有个宽的啊，CS吧，VS开吧，OK，我们先不用这个。

是吧，找你我们直接来I看的吗？是不是OK，我们说直接来看斯吧，好来看一下，我们说正常浏览器的话是是这个吗？你说现在我有没有画布啊，应该是有一个画布的。看不见是不是啊，你看是不是这边有个300乘一百五的一个画布的是不是，OK，只不过这个画布是个嘛，白色的是不是，我们来看一下啊，我们说什么什么是开斯画布啊，开是H新增的元素，不是属性了啊，我们说我们现在在讲H新增的元素和属性啊，属性我们之前讲了class这些，这些都叫属性嘛，是吧？那这边我们讲一个元素叫啊，可以通过使用Java中的脚本来绘制啊图形相当于开va，它就是一个布，你要去开va上面去画东西还得通过啊。是是，他可以绘制图形，创建动画啊，开是最早是由苹果引入到他的，我我什么内核当中去的等等，一开始是什么苹果引入的，好，我们可以使用开标签来定义个开元素，使用开标签时建议成最初键不要使用闭格的形式，懂不懂，因为我们写很多元素的时候，我们写我用什么。

习惯性在这边是什么闭合？是不是啊，可是我们说为了提高这个金容性，干嘛一定要让它成对出现，对不懂，OK，那么再来看啊，看法是元素默认具有高宽跟300个一百五八是吧，好，可是我们说有些浏量器不不支持开发斯吧，比如说这样，我把这个全局的背景干嘛，我们来先调一掉马干掉干掉，OK，我们说来一个啊全局的背景玻璃是不是这样吧，我们把一些要做的事情做HT跟玻璃干嘛hat。

为百分百overlow为是吧？OK body来一个背景吧，Background啊，Pink你啊，那这样的话你们就能看见了，诶，你看这个画布的默认颜色跟谁一样？啊，跟我们的背景色是一样的吧。懂吗？它默认不是白色，懂不懂，它的默认的颜色是跟着我的玻璃的背景一样的，懂不懂，那这样的话，我们干嘛把开这个什嘛也改一改是不是走你比如说干嘛我们说让它的背景颜色是一个灰色，是不是只有你。你看是就出来了，好一般想让它居中怎么办？记住这个看它也是一个元素，它干嘛，我们这些数据它都可以用的懂吗？LEFT00 OK right00，呕吐好像没有高宽，因为他默认有高宽吗？懂吗？好，那是不是也居中了，懂不懂？OK，那我们来看一下我们说什么，在比如说看下我们的IE。

老祖宗。他是不是有2F12。有没有？I7也没有吧，我记得IE9都没有。啊，A9有A8呢，I8就没有了吧，那对一般我们写开发式的话，如果你想干嘛做的好一点的话，最好给用户一个提醒吧，来一个标签吧，是不是说干嘛您的。您的浏览器干嘛不支持画布元素干嘛？请您换成是吧，萌萌哒。

啊，不是么么哒了，换成萌萌的谷歌啊，谷歌浏览器吧，这边你再搞一个一标签，给他一个谷歌浏览器下载的地址是就可以了啊，一般五这位这去做懂不懂这个都是什么，最最基本的，你想看看是干嘛，最基本东西你得知道是吧？OK，好，我们再来看，好我们说嘛，替换内容啊，因为开发是很容易定一些替换内容，由于某些比较老的浏览器啊，I9之前这些浏览器不支持开发式元书吧，但这些浏览器上你应该要给用户展示一些替代内容啊，非常简单，我们直接在开发式的标签当中提供一些替换内就可以了啊，支持开放式浏览器会忽略容器中包含的内容。也就是说，你如果这款浏览器是支持开的，你相当于这里面啥都没有。懂吗？你写这些东西，他不会去给你做任何展示的。记住，我们说开马斯是一个画布。

啊，画布不是说你在它里面去画内容。你是在这个开马画布上面画那种，如果你浏览器支持开马式，你在里面写的任何东西。啊，都会被干掉，懂不懂，除非你浏览器不支持开发式啊，那他会把这个开发式元素给你干掉啊，它就给你去显示这里面种。能理解吗？啊，这个这个点你注意一下的OK。好OK啊，不支持开va的浏览器会显示替代内容吗？是吧？那开va标签有两个属性啊，只你他哪两个属性？看标签跟我们这个一般标签干嘛。哎，我怎么把课件关了，开发标签跟我们一一麦标签很像，都有什么？外跟啊，因为我你还有什么还C什么嘛，是吧，可是我们说开斯跟你很像啊，因为我开发本身它也嘛，也有外式和hat好，你们想想你们之前在写这个开发式的时候，有用CSS给他觉得是过发吗？

啊，切记啊，在开马斯开发的时候，千万不能用CSS去给开马斯这个元素指定高宽，为什么？那我们来看一下，OK啊，第一个我们说外跟你放在这边对吗？没有太大问题啊，你在开发里面的元素你画上去多少就是多少，可是你把这个y head如果给了这个test。是不是他会缩放你当中的内容呢？懂吗？啊，这个我们在画画图形的时候，我们可以看到啊，OK，好，那我们再来，好，那这是我们看到是什么，就是最最基本的一个样子吧，是吧，那我们来看，首先我们说什么看里面。好，你是不去画图啊啊，你要在开发里面去画图的话，你得拿到什么，首先你你这个画布你得拿到是不是点on road等于function。

是不是OK，我们说先拿画布一个什么画布一般我们叫什么啊，画布直接就就test no是不是等于什么多个特点carry q。Err啊，Que莱克的啊，我不知道我们讲完规范之后啊，有没有同学是去文档上看快莱的这个API的。你如果看这快越10API的话，你要知道快越身上是有坑的。啊，只不过这个坑暂时还没有跟大家去提而已啊，只要你看过API，你就知道他身上是有坑的啊，它是一个快照属性，它只能保存动物结构里面的快照，在这个时间段的快照。啊，之后我们会讲到你先干嘛记一下，我们说身上有坑。啊，OK，那你们可以提前的去看一下文档。

啊，具体是要具体是一个什么样的坑啊，我们从了之后再来说啊，因为这个案例里面的话，没有没有一个什么就是很好的场景去模拟这个快L的坑啊，之后我们会遇到啊，如果有心的同学先去看一下快到底是定义在谁身上的啊，Noe能不能用，Element能不能用啊，以及快L上它到底什么坑，文档上面说的很详细啊，最后我们用的时候，我们讲的时候的话也会稍微顺一点，OK，那么来看一下去找什么。去找这个test是不是OK，我们说现在画布是不是拿到了，是不是，我们说这边相当于什么拿到画布是不是，拿到画布的话，你是不是要去在画布上面画东西啊，得拿到一支笔吧，可是我们首先得看看有没有这支笔是不是，你得判断一下吧，我到底有没有这支笔吧，怎么办？什么比是什么？

Test是不是不需要调用，看一下有没有。是不是啊，如果这个API存在的话，说明你是什么支持开放是这个跑步的嘛，是不是啊，OK，因为你写的是解代码。A9底下的话，你你如果不写这个判断的话，就给你么报错的懂不懂啊，虽然说我们昨天有同学是不是啊，前天有同学介绍过什么，去看一下是吧，可能在我们前端编码当中的话，缺开启我们用的很少。懂不懂？因为本身这门语言就是很很很松散的语言，懂不懂，如果你用拆开器的话，你会发现你写代码全是开启。懂不懂一般我们不用去看系，我们一般什么人为的，你知道有坑的话，我们是会来判断文的懂不懂，这是这是一个JS开发者编码下面的一些规则。懂吗？OK，比如说那我们现在什么，如果你能进来的，说明你是有画笔的，那我去把这支画笔拿到，一般画笔叫ctx等等，等于什么tax，点什么get。

是吧，我们说是要什么什么。这什么模式的吧，是吧，你不穿就会出问题啊，因为我们现在开发就是什么在2D平面上的，懂不懂3D上面的其实叫什么WiFi。叫懂到啊，那这个东西你们什么知道就行了，那说什么来看一下这里啊。啊啊啊，OK，小问题，好们来看一下这里什么选染上下文啊，我们说开是元素，只是创建的一个固定大小的画布，想让他们去绘制内容，我们需要去找他的宣染生文，一般这个宣染文你可以把它理解成画。对吧，OK，什么开是元素，有一个叫做的方法，这个方法是用来获取渲染三角文跟他的绘画功能的，只有一个参数，上下文的格式啊，一般我们写。

2D啊，看完时点给2D懂不懂，可是你在获取这个画笔的时候，一定要做一次检查，是否有这个画笔，如果有这支画笔你再去拿，没有的话，你调这个API是会报错的。懂不懂，因为你在这边干嘛调用了吗？那哎，那说那那肯定，那这个如果没有的话，会不会出错。不知说这是属性吗？最终给你返回安迪犯的吗？你没有调用吗？你在这边相当于是把安安迪方的把把它当成什么函数去这个嘛。助理是调用宝这边就给你报。对吗？OK，对，好，那我们再来看好，那是不是拿到这个画笔了，拿到画笔的话，咱们是不是就可以去画东西了，好记住，首先这是我们写开发式啊，比如大家都得知道的啊，怎么去建啊，创建一个开式元素啊，最终怎么去拿这个画笔等等，拿到这些画笔之后，那么就好玩了，OK。

好，来看一下好，呃，笔记里面第二个。OK，那基本用法是不是就过了。啊，基本用完是不是就过了OK。