使用HTML5 Canvas API控制字体的显示与渲染的方法_html5教程技巧

企鹅博客
企鹅博客
企鹅博客
30160
文章
0
评论
2020年9月17日03:48:20 评论 9 views 610字阅读2分2秒

API简介

今天我们开始征战一个全新的内容——HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字。是不是很有意思?

好了,先预告一下Canvas 文本API有哪些。

属性描述
font设置或返回文本内容的当前字体属性
textAlign设置或返回文本内容的当前对其方式
textBaseline设置或返回在绘制文本时使用的当前文本基线

方法描述
fillText()在画布上绘制“被填充的”文本
strokeText()在画布上绘制文本(无填充)
measureText()返回包含指定文本宽度的对象

看了上面的表格,相信童鞋们以及有了大概的认识。这里,我们先说文本的显示与渲染,用到了font,fillText()与strokeText()。

基本文本显示
在Canvas上使用文本,必须得先知道:Canvas上的文本不能使用CSS样式,虽然font属性与CSS的属性相似,但是却不能够交换使用。

显示文本三步走战略:

1.使用font设置字体。
2.使用fillStyle设置字体颜色。
3.使用fillText()方法显示字体。
这里的font属性可以不指定,如果没有指定字体,则默认自动使用 10px 无衬线体。

下面的代码简单显示了一段文本

JavaScript Code
复制内容到剪贴板

  1. "zh">
  2. "UTF-8">
  3. 基本文本显示
  4. "canvas" >
  5. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
HTML5Web 存储实例详解 H5教程

HTML5Web 存储实例详解

HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是cookies。但是Web...
推荐3D翻牌效果特效(收藏) H5教程

推荐3D翻牌效果特效(收藏)

今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: