Html飞机大战(十二): canvas写字（结束状态的编辑）

好家伙，基本的功能都做完了，来补充一个结束状态的游戏结束文案

 

上代码:

case END:
              //给我的画笔设置一个字的样式
              //后面写出来的字都是这个样式的
              context.font = "bold 24px 微软雅黑";
              context.textAlign = "center";
              context.textBaseline = "middle";
              context.fillText("GAME_OVER", 480 / 2, 650 / 2);
              break;

(喜欢黑体的就改黑体)

 

1.fillText方法

简单概括一下,就是在画布中添加文本

 

2.font方法

用于设置字体样式

属性就比较多了

HTML canvas font 属性 (w3school.com.cn)

这里要着重说明一下居中垂直的设计到的两个属性

3.textAlign属性

 

(其实我觉得只要把坐标定好了,这个属性的的影响并不会很大,目前看来)

 

4.textBaseline属性

这个属性有一点点抽象

 

想象一下,记得高中的时候,

你亲爱的老师为了让你们在英语作文这块多拿两分卷面分(字写得好看一点),

会让你们去练衡水体

 

然后你就看到你的英语练字本上面有几行线,

为了规范你的字母形状的线

 

这个textBaseline属性就是把这个"线"的概念具象化了

 

上图

 

 

然后

 (图片素材来自网络)

所以,你喜欢哪个调哪个就是了

来看看效果,