16.5 显示分数

  现在来编写drawScore函数,以便在画布的左上角显示分数,如图16-1所示。该函数使用fillText环境方法为画布添加文本。fillText方法接收一个文本字符串,以及想要显示文本的位置的X和y坐标。例如:


ctx.fillText("Hello world!", 50, 50);

  将会在画布上坐标(50,50)处显示字符串“Hello world!”。图16-5展示了其样子。

《javascript-少儿编程》第16章开发贪吃蛇游戏第1部分显示分数

图16-5 在点(50,50)显示字符串” Hello world!”

  看看,我们已经把文本显示到画布上了。但是,如果想要对文本的外观进行更多的控制,例如,调整大小和字体,以及更改对齐方式,该怎么办呢?我们可能想要使用不同的字体显示贪吃蛇游戏中的分数,让文本更大一些,并且确保文本准确地位于左上角,紧挨着边框的下面,因此,在编写drawScore函数之前,先来了解一下fillText方法,看看定制文本在画布上的显示的一些方法。


本站内容未经许可,禁止任何网站及个人进行转载。

   口袋儿题库-青少儿编程自测题库