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

<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),渲染输出三个大的方向。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

响应式web布局中iframe的自适应

困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

389120
来自专栏杨龙飞前端

css常用居中

32660
来自专栏黑泽君的专栏

day01_html学习笔记

23910
来自专栏从零开始学 Web 前端

div盒子水平垂直居中方法

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

21830
来自专栏Flutter入门

Android OpenGL ES(八) - 简单实现绿幕抠图

这里的关键是,判断颜色的范围。这里简单的认定 g>140.0 && r<128.0 && b<128.0 时为绿色。当是绿色的时候,就将其颜色换成白色。同时al...

36920
来自专栏一“技”之长

iOS界面布局之一——使用autoresizing进行动态布局

autoresizing是iOS中传统的界面自动布局方式,通过它,当父视图frame变换时,子视图会自动的做出相应的调整。

9020
来自专栏Android开发与分享

【React Native】react-native-scrollable-tab-view

593120
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

27250
来自专栏cnblogs

【垂直居中高级篇】你不知道的垂直居中方式

      在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用...

21280
来自专栏郭霖

Android视图绘制流程完全解析,带你一步步深入了解View(二)

在上一篇文章中,我带着大家一起剖析了一下LayoutInflater的工作原理,可以算是对View进行深入了解的第一步吧。那么本篇文章中,我们将继续对View进...

37280

扫码关注云+社区

领取腾讯云代金券