绘制文字时可以使用fillText方法或strokeText方法。
fillText方法用填充方式绘制字符串，该方法的定义如下所示：void fillText(text,x,y,[maxWidth]);
该方法接受四个参数，第一个参数text表示要绘制的文字，第二个参数
x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐
标，第四个参数maxWidth为可选参数，表示显示文字时的最大宽度，可以防止文字溢出。
strokeText方法用轮廓方式绘制字符串，该方法的定义如下所示：void stroke text(text,x,y,[maxWidth]);
该方法参数功能与fillText方法相同。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>文字的绘制</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context=canvas.getContext('2d');
context.fillStyle= '#00f';
context.font= 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
context.fillText ('珊瑚贝欢迎你', 0, 0);
context.font='bold 30px sans-serif';
//轮廓字符串
context.strokeText('珊瑚贝欢迎你', 0, 50);
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
补充：
给文本添加样式
font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。
textAlign = value 文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。
textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
