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

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复制内容到剪贴板

2. "zh">
4. "UTF-8">
7. body { background: url("./images/bg3.jpg") repeat; }
8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
12. "canvas-warp">
13. "canvas">
14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

//1. 使用`font`设置字体。

context.font = "50px serif";

//2. 使用`fillStyle`设置字体颜色。

context.fillStyle = "#00AAAA";

//3. 使用`fillText()`方法显示字体。

context.fillText("《CANVAS--Draw on the Web》",50,300);

};