Canvas的HelloWorld文本的样式文本的测量总结

孙亖

发布于 2018-06-07 11:17:10

8310

发布于 2018-06-07 11:17:10

<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。 WebGL使用<canvas>元素来用于网页上的3D图形硬件加速。今天，我们使用canvas来画一个正方形，了解其基本用法。首先新建一个html文件：

<!doctype html>
<html lang="en">
 <head>
  <title>Canvas 的 HelloWorld</title>
 </head>
 <body>
  
 </body>
</html>

canvas英语里面就是画布的意思，我们作画之前先把画布放到网页里面：

<canvas id="canvas"></canvas>

画布算是放好了，id属性可以让我们在后面的JavaScript代码中选择引用该元素（这里就是canvas画布）。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

文本的样式

有样式的文本在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式：

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。如果你之前使用过CSS，那么这些选项你会很熟悉。

文本的测量

当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。

measureText() 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。下面的代码段将展示如何测量文本来获得它的宽度：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

总结

这里我们通过在canvas上写字对HTML5的canvas有一个初步印象。一般来说就是放置画布（canvas），获取上下文（2D或WebGL），渲染输出三个大的方向。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.03.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html5

java

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html5

java

登录后参与评论

0 条评论

热度