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

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

插播一段广告

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

画布 MDN文档

广告之后马上回来–需要用到的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) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。

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

先看效果图

定义两个画布

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

在画布中心写上中奖消息

获取上下文

let myCan1 = document.querySelector(‘#can1’)

let myCan2 = document.querySelector('#can2')
let cxt1 = myCan1.getContext('2d')
let cxt2 = myCan2.getContext('2d')

在第一张画布“#can1”定义我们的中奖消息（既然虚拟的就写得高大上一点）

let award = “索尼70英寸液晶电视配套的遥控器一个”
获取画布上的宽高，并求出中心点（两张画布是保持一致的）

let w = cxt1.canvas.width
```
let h = cxt1.canvas.height
let x = w / 2
let y = h / 2
```

在第一张画布“#can1”中心上绘制文字

cxt1.font = ‘30px Miscrosoft Yahei’

cxt1.textAlign = 'center'
cxt1.textBaseline = 'middle'
cxt1.fillStyle = 'hotpink'
cxt1.fillText(award,x,y)

在第二张画布“#can2”做手脚，绘制一个长方形遮住第一张画布“#can1”上的文字

cxt2.beginPath()
```
cxt2.fillStyle = '#eee'
cxt2.fillRect(0,0,w,h)
```

开始清除第二张画布的内容”#can2”

鼠标进入画布时，按下的时候清除
获取鼠标在画布中的位置
鼠标在清除面积的中心

var bool = false // 只有鼠标在按下的时候移动才有效

var area = 10 // 定义清除面积
document.onmousedown = function (e) { 
    bool = true
}
myCan2.onmousemove = function (e) { 
    if(!bool){ 
        return
    }
    // 获取鼠标在画布中的位置
    let x = e.pageX - this.offsetLeft
    let y = e.pageY - this.offsetTop
    cxt2.clearRect(x - area/2,y-area/2,area,area)
}
document.onmouseup = function () { 
    bool = false
}