canvas标签fillText在画布绘制填色文本。
绘制填色文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制填色文本-HTML教程www.xuandaima.com</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = "46px serif";
ctx.fillText("炫代码", 50, 50);
</script>
</body>
</html>| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型（2 维）的环境，未来可能会支持3维，但现在支持2维。 |
font = "46px serif"; | 设置字体大小为46像素，字体为“serif”。 |
| fillText("炫代码", 50, 50); | 绘制填色字体文字和字体位置，X轴为“50”Y轴为“50”。 |
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
fillText的填充默认颜色值为黑色
context.fillText(text,x,y,maxWidth);
| 参数 | 描述 |
|---|---|
| text | 规定在画布上输出的文本。 |
| x | 开始绘制文本的 x 坐标位置（相对于画布）。 |
| y | 开始绘制文本的 y 坐标位置（相对于画布）。 |
| maxWidth | 可选。允许的最大文本宽度，以像素计。如果该值小于实际文本宽度时则会缩小文本宽度。 |
