绘制文字时可以使用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。