使用HTML5 Canvas API控制字体的显示与渲染的方法

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

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

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

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

显示文本三步走战略：

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

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

JavaScript Code复制内容到剪贴板

<!DOCTYPE html> <html lang="zh">
<head> <meta charset="UTF-8">
<title>基本文本显示</title> <style>
body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style> </head>
<body> <div id="canvas-warp">
<canvas id="canvas"> 你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas> </div>
<script>
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);
};
</script> </body>
</html>