HTML5画布canvas实战(2)--刮刮乐(模拟刮卡中奖)

插播一段广告

HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成 canvas 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

画布 MDN文档

广告之后马上回来–需要用到的API解释

getContext()

1. 渲染上下文：canvas创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式
2. canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。
3. 语法

var cxt = canvas.getContext('2d')

文本相关的API

1. ctx.fillText(text, x, y [, maxWidth]):在 (x, y)位置填充文本(text)的方法。如果选项的第四个参数提供了最大宽度(maxWidth)，文本会进行缩放以适应最大宽度。
2. strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。
3. ctx.measureText(text):返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）。
4. ctx.textAlign = "left" || "right" || "center" || "start" || "end":基于你在fillText的时候所给的x的值的对齐方式
5. ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom":决定文字垂直方向的对齐方式。
6. ctx.font = value:符合CSS font 语法的DOMString 字符串。

clearRect()

void ctx.clearRect(x, y, width, height);

The CanvasRenderingContext2D.clearRect() 是 Canvas 2D API 设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。

你没有走错片场，开始入正题了…

先看效果图

定义两个画布

1. 一个画布用来存放文字
2. 一个画布用来放遮罩层