闲来玩十三水规律|十三水马牌赢了怎么算|

HTML5绘制字符串


对象(CanvasRenderingContext2D),我们都把它叫做ctx,绘图主要用这个对象的API来进行。



绘制文字的两个方法


1.fillText(String text,float x,float y,[float maxwidth]):填充字符串


凡是有fill,就是填充一个实心的字符串。

这里面的参数:


1) 第一个是文本类型的,就是你要画哪个内容。

2) 第二个是文本的横坐标。

3) 第三个是文本的纵坐标。

4) 第四个是最大宽度是多少,这个参数可?#22278;?#35201;。


2. strokeText(String text,float x,float y,[float maxwidth]):绘制边框


这个就是绘制一个空心的字符串。

 


其它的属性


1. 给文字设置一些粗细、大小以及字体


font="bold 45px 宋体"


2. textAlign设置绘制字符串的水平对齐方式


start|end|left|right|center


3. textBaseAlign:重直对齐方式


top|hanging|middle|alphabetic|bottom

 


HTML5的API


1. 打开浏览器,访问w3school网站


HTML5-1.png


2. 在教程里面看HTML5


HTML5-2.png


然后是HTML5画布


3. 看一下它的参考手册


4. 这里列出了ctx这个对象支持的浏览器有哪些


HTML5-5.png


5. 然后列出?#25628;?#33394;、样式和阴影,这里有很多属?#38498;?#26041;法


HTML5-6.png


6. 我们绘制文字的话,是fillText,就是这3个属性


HTML5-7.png


画文字主要就是这么几个属性


HTML5-8.png


1) Font:就是设置文字的字体。它的格式是这样的,直接给个大小和字体。


HTML5-9.png


2) fillText:是给一个内容,然后是字的坐标。

 


程序演示


1. 先复制一下之前的index3.html。


2. ?#31243;?#19968;下,重命名为index4.html。


HTML5-10.png


3. 同样的还是这个画布,我们把这些删掉,我们只是画一段文字


HTML5-11.png


a) 然后,我们先设置一下字体与大小。


HTML5-12.png


b) 然后画字。参数是:文字的内容,x坐标,y坐标。ctx.fillText("大家好",100,150);

c) 成功绘制上


HTML5-13.png


d) 那么我们?#37096;?#20197;设置这个字体的颜色。ctx.fillStyle="#00F";运行,颜色改变了。


HTML5-14.png

 

4. 之前是设置的实心的字,我们?#37096;?#20197;设置空心的字


1) 使用strokeText。
ctx.strokeText("大家好",100,200);


2) 我们还需要设置字体的颜色。
ctx.strokeStyle="red";
这个颜色可以给颜色的单词,?#37096;?#20197;给16进制的颜色表示。


3) 还可以设置字体的大小和字体。
ctx.font="bold 34px 微软雅黑";


4) 运行


HTML5-15.png


5. fillText和strokeText的区别


strokeText是空心的文字;fillText就是实心的文字


6. 我这里使用了font这个属性,其实这个属性可以给3个值。


HTML5-16.png


我们看一下API,这个可以设置字的字体,?#37096;?#20197;设置字的粗细,?#37096;?#20197;设置字的变体。


HTML5-17.png


这一个属性我们可以给3个值。比如我们要加粗的话,可以给bold:这3个值就像我们写css一样,它可以自动识别。


HTML5-18.png


运行一下,就会发现这个字加粗了。


HTML5-19.png



textAlign


1.这个是水平和垂?#26412;?#31163;的对齐方式


HTML5-20.png


textAlign是设置水平对齐方式。如果这条蓝线是设的我们放文字的x坐标,那start就相当于是左对齐;如果设置了end,就相当于是右对齐;center就是居中对齐。


2. 在代码中验证一下:水平的对齐方式


textAlign的start效果

1) 我们这里给实心的字体设置一个textAlign属性。
ctx.textAlign="start";


HTML5-21.png


2) 运行效果,这就是左对齐


HTML5-22.png


textAlign的center效果

1) 实心字体设置为:ctx.textAlign="center";

2) 相当于黑线离左边是100像素,这个文字就在黑线的中间。


HTML5-23.png


一般我们用的就是left、end和center,从这个图中很容易的就能够看出来,这个是水平的对齐方式。


3. 垂直的对齐方式


1) 这个叫做textBaseline。


HTML5-24.png


2) 这个也很容易能够看懂,比如说这个top。
如果指定了垂直的坐标是50,蓝线距离上面50。
top:
那如果设定了top的话,就是字的顶部距离上方式50像素。
bottom:
如果是bottom的话,就是下面距离顶部是50像素。
Middle:
如果是Middle的话,中间距离顶部50像素。

我们一般用得最多的就是top、bottom和middle。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
下载讯飞彩票 三期内必出稳赚一肖 澳门大小赔 稳赚时时彩计划软件下载并安装 神圣计划 app 三个骰子大小 双色球怎么买中奖率高 北京pk赛车官网数据 免费四肖八码长期公开 五星不定位三码计划