20_尚硅谷_h5_canvas-文本相关.wmv原创

好啊，那到现在为止啊，我看我们都讲些啥啊，基本用法到使用图片设置背景应该没太大问题了是吧？OK，然后我们说到开斯当中，我们是不是还没写过文本啊啊，因为我们说开当中的元素的话。就是开这个标签内部的元素的话，我们会去渲染吗？啊，你在这边写一些文本行吗？行吗？肯定是不可能的吧，你看他身上是不会有任何的文本的吧，是不是，所以说干嘛我们是没有办法在开发师内部去干嘛，开发上面通过什么这种HTL的什么文本的形式去写吗？那是不开也得有API啊。是吧，OK绘绘制文本，OK，那我们开启另外一块就跟文本相关的啊，这是不是使用图片呢，一个是飞鸟的嘛，然后就是一个嘛，跟文本相关的，我们来看一下OK09和文本相关的。OK，应该是绘制文本啊，这个文本也是中国开发师画到自己的。

啊，画布上面去的好，来看一下怎么玩，Ctrl c ctrl v OK，看绘制文本这边提供的两种形式吧，给来看一下。文本绘制文本OK，怎么绘制好？这里好还是一模一样，我们先拿到这个画布。好，拿到这个画布之后怎么往上去去写东西吧，好怎么写来看一下几个API，好绘制文本这块在看发当中，如何去绘制文本，看提供了两种方法来渲染文本，跟在指定的XY位置，是填充指定的文本吗？啊，这比较简单吧，好扎线啊。啊，想想都别想了，这是ctx上的一点什么feel text，你说干嘛？我说来一个上规故是吧，是OK，哪个位置偏移的话，现在我去让他一百一百的位置吧，来一个偏移是吧？走，你那上面是不是就可以看见文本了，文本颜色能不能改？

通过什么改，现在我是通过填充的形式吧。Feel STEM来看一下，好，可以看吗？我们说ctx什么feel style是不是等于什么deeper pink看一下行不行？哎，是不是兄弟升本了，好，我们干嘛，还是换一个比较温柔一点的颜色。鸡阴，OK，好。是不是啊，OK啊，比如说改改成贾乃亮吧，好，这里。好惨啊，我觉得他好来看一下，OK，整点，然后呢，现在是不是咱们干嘛换的是一个填充的文本字是不是太小了，那想干嘛，我们可以设置一些样式放。

OK干嘛？我们说ctx点什么point等于什么，比如说30TX看行不行。行不行，没动过，哎，还是说我们一开始就是30片子80片制。开玩笑嘛，不行，是不是它必须得加字体，而且开发中只支持只支持一种字体啊，就是什么这种衬衬线字体懂吗？而且你哪怕写错了，比如说邱海波。看他就会给给你去使用那种字体，他就这一种字体懂吗？OK啊写作也行啊，所以说其实其实你只要在那边干嘛写点东西就行了，反正他只有这一种字体吗？是不是啊，诶我觉得这个好玩，邱海峰好，只有你海峰是不是OK，好给他上色，好来看一下不是我给他上色了啊开个玩笑，好就你小海峰是不是OK，来看一下这个字体是不是变大了啊，最好写什么写这种，它只是这种什么称称线字体tlc这那最好给他写上这里啊，你们不要告诉他，好来看一下这里我们应该怎么玩。

好，放在属性什么指定时必须要有自己大小，必须要有大小跟字体啊，缺一不可是吧？好再来看咱们是不是现在是feel text啊，还有一个什么是这个text，来看一下这个吗？我让你写一遍这个吗，描描一遍看。走你诶我们之前是不是有玩过，是不是我们这像像一个浮雕文字吧，你看我如果不去填充。哎，有点像浮雕。是不是OK，有点浮肿啊，看一下，走你过来上去，哎，渲染一下，有点像浮雕，是不是OK？走你好像要有个阴影，是不是更好？是吧，我看待会有没有意义，好来看一下，这是我们说什么，这是我说绘制文本的两个方法吧，Fair text跟text是不是就讲了它一个样式，放吧，啊放里面我们说这个大小跟这个字体缺一不可，是吧，是OK，再来看两个基类的。

好，A跟啊，这两玩意实在是让我感觉特别特别的无语，CLCCL02，我们可以来看一眼啊，可中一圈呢，又又会有人去用啊，那这个。而且他用的还很巧妙，很责任是是好，这道理什么意思呢？按照我的理解啊，大家看现在我们当当中是不是写了一个秋海是吧，是不是在100这个偏移上去开始写了是吧？OK，你说干嘛，我让他稍微往前走01:50。好吗？50是吧，下面这个给他干掉，只有你。好五十五十秒，按照我的理解，我说你是不是有一个属性叫什么text扔了，那我说干嘛，我们说那你就上来来个什么。

CX，点什么是吧，比如说你的是什么。生吧，是不是？那我的理解你就应该居中啊？是是看一下他怎么的整体他有居动吗？没有，极其的无语，让我来看我没有写字的时候在哪？是这款是不在五这个偏偏这个位置啊，他是怎么办的，他是依据这个偏量位置干嘛啊，秋海风当当中干嘛。平分了，就这个干嘛，五十五十偏的位置，把邱海波这三个字啊平分了，来看下是不是这样，这点他等于真的所以一刀。下平分了吧，等等再来看还有什么。Left OK，看什么？走，你。看这不把邱海峰的左边靠到我们的50篇上处是吧？Right呢，把邱海峰的右边靠到我的。

啊吧，把公的右边扣到我50平上数。是不是啊，是不是有点鸡肋啊。跟我们的理解不一样吧，我们理解你应该在这个容器左对取右对取居中是不是，可是发现不是这样的，能不这好，那这个干嘛，这个跟我们C赛里面是不一样的啊，注意一下，那还有什么。可是呢，差不多一个水平方向，一个什么。垂直风向面是不是太色的吗？BA1吧，BA等于是等于呢，是不是啊，这些API需要你记一记，就是听个一遍就够了，懂吗？OK。好，我们干嘛？我们说不要tax，那默认它在哪？不在这边。是不是啊，没有没有问题，来看一下我们干嘛，我们说来一个face LA，好，Top命中。

CDX点什么这个小玩意干嘛？比如说干嘛叫top，看似是什么鬼。走，你看这是什么？我看诶，怎么感觉怪怪的，Top怎么跑到这边来了啊，看下这个吧，Bo。什么middle mid走上去是不是干嘛，我们说是不是这个这个机线在哪。对。我们我们不给这个字体，这个字体是不是对机械会产生影响啊。哇，这个线在哪。哦哦，我10万它偏移的有点远了，上面也是偏移，什么50PS啊来我们放了吗？放成零的时候可能大家比较好看，只要脸现在我什么都不想。来看它应该是。我有写什么吗？

我什么都没写，他怎么他怎么上面去了。啊T，比如这个嘛，我为BOT。波。哎，是不是直接直接上去了，看我拓啊跟机线有关系，所拓，哎是不是在在这边好再来看这个嘛，密度，密度应该是自己的字体，干嘛跟这个极线对齐。交警是不是上来了，来看一下这到底什么意思啊，来看一下拓把文本极限在文本快打顶部，来看一下这这个这个什么意思啊拓把。OK，拓盘走你上去，文本基线在它的顶部嘛，懂不懂相当于你按底部给我嘛，对齐嘛，OK Bo呢BOTOK，就是你这个机线干嘛在我的底部，你看它其实在哪。上面真的那种呢。中间只有你OK一半在这边懂不懂，这跟机械的位置还有关系，懂不懂啊，所以说这个属性干嘛了解一下就行了，你知道有懂不懂啊，因为我们知道开你们这个机线跟CS机线又不一样了，懂吗？啊就说差不多这种东西干嘛知道就行了，有有有这两个，一个是控制什么水平台，一个控制啊垂知道OK，那确实我们用的不会太多啊，知道一下就行了，OK，那这个东西的比较多。

OK，什么measure text吧，好，这个代表什么东西，好再代表一个API，我们来看这个，这个应该是干嘛的。因此。里面什么text me？As，是不是来T是不是要我老密走？好，怎么办，我们说现在咱们是不是画了一个字啊，是不是在这上面，是不是这极不极限的断掉，最讨厌的就是极形。这里耶。

默认是干嘛？好像默认是。基线是不是干嘛在你这个文字稍微偏上面一点点啊，是不是啊，那这个时候让你拼一稍微偏一偏50 50的位置开始给我画板是不是啊，这个跟机线的什么默认值有关系啊，这个咱们不要管它了啊，这个机线太烦了，好所以你们来看一下这个代表什么意思，比如干嘛我们说ctx点什么，那修什么text吧，看这到底什么鬼，有没有任何作用，没有是不是来看一下那修干嘛的返回一个对象嘛，关于包含关于文本尺寸的一个。信息吧，来看，他说他会返回一个对象啊，我们看Y1什么。OB接吧一个对象，我们来看下这个对象啊，打个断点，第1BGJ2方走你。F12，来刷一下，OK，是不是停了，是不是来看这个概念，你看我断点打到这边的时候有没有画上去。

几块吧，是吧，来。我里面先把这个给他干嘛干掉走你。好干嘛，然后我是不是往下走一个，把这个obj干嘛监视进来走你诶是不是报错了，他说什么。它有一个参数是必须的吧，是不是你现在是不是一个都没传，OK，你干嘛，你不知道吗？有秋海风吗？CTRLC你干嘛你要把这个秋海风的信息干嘛给他传传进来啊，他能给你返回什么。Johnny。走，你停吧，OK，往下走，往下走是不是一个对象，这个对象里面什么外一百二什么意思啊，你现在这个邱海峰占据了我的文本的宽度是120。懂吗？比如说把它稍微调大一点，调成一个60天，看这个这个稍微的大一点。

九点一百八了吧，那没讲他是不是能返回你这三个字，在我现在这个条件底下，在我看完画图上面的宽度。能解吗？OK，那这个方法还是比较有用的，为什么说它有用，我们来看一下。好，我们经常有个需求的，看瓦斯科吗？文本的水平垂直居中CSS方案行吗？不可能的吧，做不到的吧？那怎么做啊？这个直接给贴下来。给你们看一下，OK，退票。好，看va里面的文本啊，最后一个文字的水平垂直居中，好，现在咱们学了几样东西的水直垂，垂直水平居中了。元素的三种方式，图片的四种方式。图片是不是可以用四种方式啊，你元素那四种方式我图片都能用啊，是不是我图片比你元素不是还多这种方式啊，我体可来嘛，是不是啊，OK，记住咱们现在学了元素啊，像div这种会计元素咱们有三种方式去做的。

是不是OK，已知宽高，已知宽高，位知宽高的图片比我们前三种还要多一种我来的形式啊，是不？现在我们说开化式当中文字如何水平垂直驱动是不是开？当中元素垂直水平动会不会做？调整它的原点的位置嘛，昨天我们不是一直在做嘛，是不是啊，OK，那看这个文本，如果随时准去找找你，我们来看一下，好比如说干嘛大家看差不多随便随便中了吧，怎么实现呢？来看一下，首先大家看。我是不是有一个放糖，你看我是不是被斯维没种啊，其次我们看宽度上面它是咋玩的。是不是拿到上规谷这个字的宽度在你页面上，在你看上面一个宽度，想想现在我OC是不是我的花布OC的宽度减去你这个文本的宽度除以我给你的可的。

什么意思啊？你待会不是要来我们里面去绘制吗？是不是，那我是不是用我这个OC整个的一个。宽度减去你自己文本的一个宽度，剩下的是这段吗？这段我除以二，两边平分吗？那不就你水平居中了吗？高度上面是一样的，OC减去60不是你的方式吗？是不是，那这不就是OC点派吗？减去你的方吗？然后再让你学。评分嘛，懂不懂，所以干嘛这个参数啊，这个方法继要跟文字的，跟开发当中文字的垂直水平就有关系，懂不懂，而且切记这个text呢，一定是middle，不然你垂直上面的话可能没有没有没有办法去居中，跟线有关系啊，懂吗？这就是开当中一个元素，文本如何垂直水平居中。

啊，那这个东西的话，经常会被问到，如果你看完当下是不是你有弹幕啊。你们看视频的时候是不是有弹幕啊，那这些弹幕很很有可能就是什么开是整上去的懂不懂，那之后我们讲讲视频的时候的话，我们说一下这个开是怎么发布的吗。啊，这个这个画布怎么跟视频标签好吗？结合起来懂吧，OK。好，那这就是我们绘制文本这块，那绘制绘制文本这块最做的知道怎么去绘制文本两个API啊，知道一下这个放的怎么去调整它的大小，知道一下干嘛measure text以及文本如何水平垂集中就可以了，那么那最后一个也干嘛，文本的阴影啊，这个我们也看一眼就可以了，OK，来看一下文本的阴影。