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

﹏ヽ暗。殇╰゛Y 2022-02-23 08:38 484阅读 0赞

## 插播一段广告 ##

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

[画布 MDN文档][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) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。

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

先看效果图  
![效果图][20190407220525526.gif]

## 定义两个画布 ##

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

## 在画布中心写上中奖消息 ##

1.  获取上下文

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

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

let award = "索尼70英寸液晶电视配套的遥控器一个"

1.  获取画布上的宽高，并求出中心点（两张画布是保持一致的）

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

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

cxt1.font = '30px Miscrosoft Yahei'
        cxt1.textAlign = 'center'
        cxt1.textBaseline = 'middle'
        cxt1.fillStyle = 'hotpink'
        cxt1.fillText(award,x,y)

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

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

1.  开始清除第二张画布的内容"\#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
        }

## 其它思路 ##

1.  使用两个画布:我们可以将绘制文字放在图片里面，使用cxt.drawImage()
2.  可以试着将画布改为div也可以,即canvas+div
3.  如果只使用一张画布，就是只渲染canvas元素一次，那么该画布只能放背景图片了；否则使用clearRect()会清除掉所有绘制的
4.  最后一种思路，这种思路比较有潜能，可能具有颠覆性，就是七个字:暂时还没有想到

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
[20190407220525526.gif]: /images/20220223/dd5f6e4c81474bb180b1bbf47ba3058e.png