18_尚硅谷_h5_canvas-使用图片.wmv原创

啊，那我们刚刚复习一下，那接下来的话，我们来讲我们开斯第二块内容啊，我们说了昨天讲的都是一些基本的代法啊，今天要讲一下开斯里面的一个叫相互操作。好，最终我们要用开马斯去做马赛克啊，去做那个，呃，叫什么挂发卡啊，我们说挂发卡用的是开马斯里面什么技术。是吗？合成是不是啊，是图像跟图像陈叠到一块去的时候，我应该怎么去展现是不是？好，那首先我们还得来说现在到现在想一想，我们在开发式里面画的图形都是不带图片，是不是我们还没有说在开发当中应该怎么去啊，干嘛引入图片是不是，你看我们是不是干嘛，我们说只是讲到了变化，是不是我们说在开发怎么去使用图片跟设置啊背景OK，还记不记得。这应该记得啊，你们做过飞鸟了啊，你告诉我，你能记得什么教你？

好。好，我们说这是做完时钟之后，我们什么再来CTRLC，我把这个基本用法还出来了吗？扣一遍OK，零七，我们干嘛使用图片。啊，我们说背景里面呢，是不是也是图片，是不是渐变，是不也是图片，是不是OK，我使用图片，OK，我们说在开发当中去使用图片啊，还是有点意思的。好说在开发中插入图片啊，开图片时必须要等图片加载完成，什么时候代表图片加载完成？啊，什么时候我们能确切的知道，哎，你这个图片正在完成，应该就点的的时候，是不是会触发一个事件，那是不是关于图片的操作，我都要放到那事件里面去。懂吗？OK，我们看零一那么。

插入图片。引入图片嘛，比说插入图片有点暴力，引入图片是不是，那是不是得有图片，OK，找图片，图片我多的是。是不是你们想要谁了？我，那我没有。这里好，你们不按套路出牌，好来看一下，OKOK，我们说这个是我们的基本套路吧，好，拿到这个套路之后怎么办？要引入图片干嘛？首先你得干嘛。挖一个image啊，最后叫什么M是不是他等什么，又一个什么级卖是不是，我们做所有的事情你干嘛。等等我交代完成再来，那我是不是应该先把请求啊，点src等于什么？

这个玩意嘛，是不是啊，OK啊，应该什么，是不是等于方形整你是不是这么玩，老板我估计你们应该是我带的最后一个整你啊，你们这的到这个里面去干嘛。应该是去操作图片了，那可能会在这边写好多逻辑，我们说最好不要在这什么发群里面写太多业务逻辑，有业务逻辑最后用什么。函数给它抽出来吧，那DR raw转代表干嘛？好，走，你代表我去引用图片吗？懂吗？怎么办？我们说方个形，来个什么DRW。OK，我只是干嘛把这代码干嘛抽出来嘛，OK，那开当中怎么去图片也是方法，点什么拽换换什么叫什么拽是不OK，第一个应该传。

什么呀，查一个图片对象，你要把哪张图片啊引进来嘛，是不是，那我们是不是就是这张图片。是不是这里啊，OK，我们看看它还有什么参数啊，专一image OK，那专一image其中1IMAGE是1IMAGE或者开啊对象啊，为什么还能是个开va对象啊，开va斯本身就是个图片是吧？你比如我们做的这个变换示例，大家看。是吧，右键图片另存为好，到桌面去看一下。它就是一个看见没有啊，你们什么都看不到，是不是你看。你们看到它就是一张图片，偏格式的图片懂吗？开发本身就是啊图片OK，可以说你也可以传开发图像，懂懂那一边，一般我们这边。

说什么啊，一般我就直接穿什么。图片吧，It，比如说我们昨天做的那个时钟看一下。把它存成图片，折脸图片另存为桌面保存一下，看一看，那是不是就是一个中码。看到没有啊，只不过里面刻度都是黑颜色的嘛，大家大家看不到吗？懂吧，你看那我是不是这干嘛，那问题你用看能不能去。换些图片，简单的图片是不是就可以了，是不是？好，这里我们再来看，好呃，那这里，那我怎么总感觉这个昨天做的这个钟表怎么感觉那么大。怎么他变得稍微小一点，是不是一开始上来这干嘛说放上是不在这边上来个嘛C点。

掉吗变成。点我点我。哎，小了点了，位置是偏了，为什么位置了啊，我们说我这个说话的话，不应该按照这个圆原点来缩放了吧，所以说这个缩放应该也放在原点偏移之后吧，是吧，来看一下这点。哎，完美是不是啊，这个注意一下。好，那大家看现在我们说引入图片，那咱们说还有两个叫什么。图片的偏移，为什么看的高宽吗那个吗偏位置一百一百，画一个两百两百，这你看行不行。是不是就已经过来了，而且图片变形了吧，是不是啊，只有你我看图片本身的大片应该是多。

多了一个点，图片本身的大小，我能不能拿到image身上看它有没有什么其他的信息，我看你有一个image，我们可以去NT上面看一眼，我记得他身上应该有，是不是这种事情没有办法记住去看什么文档吗，CTRL。好，这是SVG的。嗯，我不知道。过后我看一下。应该是其他的全部勾掉，他把时间勾掉。HTL的调。啊，SVG不掉。

看还有什么好，应该是他了是吧，OK，走你。好，你用吗？是不是OK，看它有哪些API。好。可以去留一个图片的大小吧。是不是，可是好像。参数他是不是有两个参数啊，是不是返回的是什么，会创建一个新的什么，一般讲实例嘛，是吧，这只是说的参数嘛，我们看这个实例上有哪些属性嘛，是吧，这你来看下参数上有哪些属性，好像都不能用啊。有有有。在哪，嗯，是吧。也肯定有外色，是不是有外色都是一些子读属性嘛，为什么全部给他标红。嗯。

啊，这是不是删了是吧，这个也删了。我，你们没有。Y等于三嘛，那说明它是有Y派的嘛，是吧，所以说自己要学会去看这些什么。文档啊，那干嘛，我们说那能不能这边写嘛节点。啊，要IDT是不是啊，照理来讲，我觉得它应该是有这个API的是不是，所以说去看一眼嘛，果然用he head是不是OK。零零，我们来看，应该跟图片一样大。是不是一样干嘛能不理解啊，OK，然后干嘛，我们说这就是这个群图片嘛，是不是那能把图片引进来，我们看还还能引啥。背景包。你想想啊，我现在是不是只是去引引入图片啊，那图片一般是不是可以去做背景啊，那怎么玩。CLCCL在哪里？零二使用背景。

使用背景，OK，怎么去使用背景。好，大家看我们说现在问你背景跟图片有没有关系啊。有，那我说一必须要等你什么？等你这个图片加载成功吗？我把你这张图片作为背景吗？你如果不需要用图片做背景，应该怎么办？Feelsone。是不是就可以了，是不是啊，现在我是不是需要这张图片做背景啊，那我操作肯定也是在这边。是不是啊，可是现在我不是把图片插进来吧，我应该是有一个矩形，它应该具有背景吗？是不是，那怎么办？那我是不是先画ctx写什么。让什么零零这个位置是不是啊，我画一个200乘以200的一个矩形，这不可以啊，默认是不是黑色。是不是你说你想改背景怎么办？Ctx点什么是不是等于个什么。

平卡，这不是改背景吗？是不是填棕色吗？懂吗？OK，那想想，那现在我是不是要把这个应该改成一个图片。能不理解啊，那怎么办？其实很好做，来看一下，我们说有个叫create开的API，这个API干嘛，它会返回给你一个啊，它的第一个参数是一个图，图像圆，第二个参数是什么？是你的评估方式，它的返回值你可以给掉。Feelsty不就是去管背景的吗？填充了东西了嘛，是不是看你要看一下我们干嘛，有个东西叫什么窥pattern是不是那个嘛，Ctx身上的什么C窥。Panda。断网了。现在呢？还锻造。

哎，这才讲多久，你就要下课了？现在呢？OK啊，那我们继续啊，我们刚说什么，我们说干嘛，这个C是不给你会返回，返回什么对象的，这些就那个被背景对象懂吗？OK，只你。好，然后我们可以把这个背景图像直接给谁给这个非这真的，可是你得告诉我你这个背景用哪一张图片去填充啊，懂吗懂吗？就是这张图片对吗？还有什么参数。你的评估方式吗？你看我不写，现在看它是个什么鬼，默认什么都没有吗？是不是啊，来看我写一个评估参数，叫什么re PA，是不是P的re啊，PA啊。Re p，我能p at出出这么多，你看是不干嘛？

咦，他有评估吗？应该是平铺的，只是说我这个太小了。是不是我自就是么？200乘以200么？看这张图。大吧，那这样我干嘛？我300我整个画布的你。平估的吧，是频不的，OK，你可以让他干嘛，能拼走你那就不皮估是吧，为什么这种东西都要用看va cp啊？啊，我们说昨天也说了一个很重要的问题啊，不是性能高，我们昨天说了个啥啊，在这边也得记录记录给大家，我们说什么。我们说我们无法使用什么选择器来干么，选到什么先看中的图像，所以说它是没有事件的。

它也是没有CSS的属性的，懂吗？只能靠他自己的API啊，所以说这种东西都要他自己自己A来做，懂吗？OK，好，你可以把开幕式相当于看成是个独立的东西。它只是建借助我的什么看法，这个元素I细胞元素来渲染说的，其他东西都是在化物以上的嘛，搭建起来的懂吗？OK只点那想想，那现在我是不是就去做了一个皮肤了啊，没什吧是吧，OK，看好还有什么，这是我们说在看怎么去设置背景吗？啊他他干嘛，他这个比较简单，只能只能干嘛屏估不平播啊，没有什么那个back的型啊这种这种玩意对不对，API本身就比较简单，简单的支持一下都。能理解我的意思吗？OK，那还有什么渐变，我们说是不是也是一个图片的是不是，你看可特零呢，什么是不是X1 Y1XY2 Y2渐边的起点跟界面的终点是吧？我们来看下这边。

渐变也是个图片类型吗？走你CTRL使用渐变。好怎么玩使用这边。一模一样，问你最终这个渐变是不是也是要填充到这个图像里面去的，那你这边肯定也是个渐变啊，这边肯定是把一个渐变类型的对象给这个非死掉，主要是这个渐变类型的对象他怎么出来的？是怎么？OK，什么，这叫CT点吗？对吧，它会给你返回出来的对象啊，这个就是那个渐变对象。OK ctrl c ctrl VG，好，它等于这个么，界面这玩意，然后你就能把这个界面给这个。

是掉，可是我们说这里面是不是两个点啊，来看这两个点是干嘛的，比如说我写零零，这是第一个点啊，第二点写300 300 OK，现在是不是两个点啊，看一下有没有渐变。没有，你还缺啥呢，颜色吧，你是不是得告诉人家这面是好，这个对象身上有一个方法叫做点的stop们看看一下，我们说你看这个规定的时，是不是就一个叫方法第一个。第二个代表color什么意思啊，必须是一个0.1，零到一之间的这数值啊，表示渐变中颜色的相对啊位置color了就是什么，你所代表的颜色，那怎么办？比如说我零的时候，我让你是一个。呃，红色是吧，OK，我说你点五的时候让你变成一个。

黄色lo是不是OK，最终到E的时候，我让你变成红配绿，绿色好加两亮色这种看法。还能不能理解了，你看我的点是从哪边的00点到什么300点，这个其实控制的界面的方向。这两个坐标控制的渐变的方向是吧，那你渐变是不是得有颜色，怎么控制？了知道问你现在我这个渐变。是不是红到黄，黄到绿的界面。是不是啊，那我需要两个点是不是就可以了。我需要两个点不就行了吗？你看红到黄黄到绿啊，我不是需要两个点就可以了吗。

两个点，我现在里面有几个界面，几个界面，两个红道黄色一个界面，黄道绿算一个界面。两个点不就行了吗？是不是，那如果OK，我再来个，比如说当中我再去一个PI，我问你现在我有几个界面，三个界面看我刷一下。你看是不是代表有三个电表，OK，那我这边点能不能写多一点。两百两百是吧，再来个三百三百其他有意义吗？有没有意义啊，我们说你是不是有这个纯色的，懂不懂，你看我这个纯色从哪边出来，跟我这个之间的关系。跟我之间这个坐标他没关系，有你看我00200 200是到我哪边这边吧。是不是再问你，其实他看了几个点，就看两个点，其实你后面这个点干嘛没有用，就你看下。

你看他们俩是不是一模一样，他只看了两个点，因为这个点，这两个点的坐标数量控制渐变啊，方向，以及你存设的一个分布的区域的懂不懂，这跟我们之前讲界面是不一样的，只不过它的API的形式不一样而已嘛。啊，这个叫这个叫什么渐变。线性界面是不是OK，那应该还有什么镜像界面，镜像界面不就是圆吗？是是，就像B4使用什么。镜像界面OK，来看看使用镜像界面看是一个什么A。吗规你？好，你看后面是不是代表两个圆啊，是不是半半，呃，圆心给你的半径吗？是吧，这里我们来看一下。

圆心跟你的半径整下面还是一样的，是不是OK，你看比如说干嘛，我说现在我是一个300乘以300啊，那我让你重一去150，原先都在一百五嘛，是吧，你画一个50的，后面也是150，一百五画一个。100的是吧，OK，现在有几个月。两个圆，两个圆是不是现在我几个界面。两个界面，两个月两个界面吗？有吗。没有看我们那边写作了。Create CK X点是不是看一下。咱们有没有，是不是有啊，你看是不是红到黄的渐变，黄到绿的渐变是不是，可是我们是最终到100，你看外面什么都什么。全子啊。能理解吗？OK。应该是当中半径为50是橙色的。

是不是，然后到100是你看是不是从这个圆开始到这个圆结束，相当于是从这边嘛，从这边出来开始才是一个渐变嘛，是不是啊，这个外面是纯色，这个里面也是啊，纯色是不是啊，OK，可是我们说现在大概，那我当初再来一个什么。0.7现在有几个界面？三个界面吧，三个界面应该有几个月。诶，你看。有没有，是不是还是两个圆，你看还是不是50~100是一个什么。十到100，你看我出来干嘛，到这边是不是50平啊，从50~100这个区域是不渐变，你看这个界面是不是红到黄，黄到粉，粉到绿的是不是，也就说这边只能选几个层状两个点嘛，不，这是什么两个圆嘛，是吧，就是两个圆之间它去做界面嘛，是吧，这边是不是两个点啊，前面是不是干嘛。

两个点啊，是不是是在这两个点是控制渐变啊方向吧，这个两个原是不是控制你的渐面区域啊，是不是跟我们讲应该差不多吧，懂吗？啊OK，而且这种东西我觉得渐变这一块的话，在看法当中应该用的不是很多。懂吧，你界面你干嘛不用什么C3的界面呢，是吧，你要想做一个图形界面的话，你干嘛最好用C3的界面吗？开的界面的话其实用的不多，而且这个开界面你也发现它比现在要简单。是不是不管是背景还是什么，还是渐变还是这个什么，这种就是样式上的属性，是不是看完要比我们的CSS要简单很多。是不是OK，那这是我们说什么使用渐变，那是不是图形这块就完了，插入图片设置背景使用渐变是不是啊，可是大家看我们现在使用渐变是不是还是放在这个旧函数里面，能不能不要放在旧函数里面。跟他有关系吗？有关系吗？跟我图片有关系吗？没有半毛钱关系。

是不是只有你渐变其实不用放在它里面，因为跟我这个图片没有半毛钱关系。John。John。OK，是不是就可以了，懂吗？OK。