HTML5 Canvas实战
1.7 处理文本
阅读(

路径和文本

绘制直线

绘制圆弧

绘制二次曲线

绘制贝塞尔曲线

绘制锯齿线

绘制螺旋线

处理文本

几乎所有的应用,都需要某种类型的文本,来跟用户进行有效沟通。本节将通过一个乐观的问候,向你展示如何绘制简单文本。

绘制文本
图1-11 绘制文本

绘制步骤

按照以下步骤在画布上绘制文本:

1. 定义2D画布上下文,并设置文本属性:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");
  context.font  = "40pt Calibri"; 
  context.fillStyle  = "black";

2. 在水平和垂直方向上对齐文本,并绘制到画布:

  context.textAlign  = "center";  // 水平居中
  context.textBaseline  = "middle"; // 垂直居中
  context.fillText("Hello World!", canvas.width  /  2,  120);
};

3. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要在HTML5的画布中绘制文本,我们可以通过font属性定义文本的字体和大小,通过fillStyle属性定义文本的颜色,通过textAlign属性定义文本的水平对齐方式,通过textBaseline属性定义文本的垂直对齐方式。textAlign属性可以被设置为left(左对齐), center(居中对齐), 或 right(右对齐)。textBaseline属性可以被设置为top(顶端对齐), hanging(悬挂基线对齐), middle(居中对齐), alphabetic(字母基线对齐), ideographic(表意基线对齐), 或 bottom(底部对齐)。

了解更多

除了fillText()之外,HTML5的画布API也支持strokeText()方法:

context.strokeText("Hello World!", x, y);

该方法是用指定颜色对文本进行描边,而不是填充。如果既要对文字进行描边,也要进行填充,可以同时调用fillText()和strokeText()方法。为了能够正确渲染文本描边时的边框粗细,先调用fillText()方法,再调用strokeText()方法,是一个好习惯。

相关参考

  • 使用阴影绘制3D文本
  • 第4章 创建镜像变形
  • 第4章 绘制一个简单的logo并随机定位、旋转、缩放

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验