绘制文字 –Canvas的基本操作

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

image.png

补充:

给文本添加样式
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。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?