插播一段广告
HTML5 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成 canvas 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
广告之后马上回来–需要用到的API解释
getContext()
- 渲染上下文:canvas创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式
- canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。 元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。
- 语法
var cxt = canvas.getContext('2d')
文本相关的API
ctx.fillText(text, x, y [, maxWidth])
:在 (x, y)位置填充文本(text)的方法。如果选项的第四个参数提供了最大宽度(maxWidth),文本会进行缩放以适应最大宽度。- strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。
ctx.measureText(text)
:返回一个 TextMetrics 对象,包含关于文本尺寸的信息(例如文本的宽度)。ctx.textAlign = "left" || "right" || "center" || "start" || "end"
:基于你在fillText的时候所给的x的值的对齐方式ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"
:决定文字垂直方向的对齐方式。ctx.font = value
:符合CSS font 语法的DOMString 字符串。
clearRect()
void ctx.clearRect(x, y, width, height);
The CanvasRenderingContext2D.clearRect() 是 Canvas 2D API 设置指定矩形区域内(以 点 (x, y) 为起点,范围是(width, height) )所有像素变成透明,并擦除之前绘制的所有内容的方法。
你没有走错片场,开始入正题了…
先看效果图
定义两个画布
- 一个画布用来存放文字
- 一个画布用来放遮罩层