《HTML5游戏编程核心技术与实战》一2.5 绘制文字

简介: canvas中除了可以绘制图形图像外,还可以绘制文字,同时也可以指定文字的字体、大小、对齐方式以及填充文字的纹理。

本节书摘来异步社区《HTML5游戏编程核心技术与实战》一书中的第2章,第2.5节,作者: 向峰 责编: 杨海玲,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5 绘制文字

HTML5游戏编程核心技术与实战
canvas中除了可以绘制图形图像外,还可以绘制文字,同时也可以指定文字的字体、大小、对齐方式以及填充文字的纹理。

fillText (text, x, y, [maxWidth]):在canvas上填充文字,text表示需要绘制的文字,x、y分别表示绘制在canvas上的横、纵坐标,最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出。
strokeText (text, x, y, [maxWidth]):在canvas上描边文字,参数的意义同fillText。
相关的文字的一些属性如下所示。

font:字体属性,可以采用类似CSS中font定义的写法,比如bold 40px sans-serif表示文字是粗体,大小是40像素,字体是sans-serif。
textAlign:对齐方式,常见的值如表2-2所示。

2_2

textBaseline:文字对齐基线,常见的值如表2-3所示。


b2_3


比如,以下代码显示了Welcome To HTML5的文字:

e1

相关文章
|
1月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
1月前
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
1月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
45 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
3月前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
3月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
63 3
|
3月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
63 2
|
3月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
57 2
|
3月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
37 1
|
3月前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
56 1