每次想系统学习一下canvas，常规流程都是

1. 看到某个炫酷效果
2. 兴致勃勃打开mdn
3. 漫无目的的翻阅5分钟后关掉

于是这次想改变一下战术，从小需求出发，从农村包围城市!

刮刮乐

思路

1. 将canvas绝对定位覆盖再获奖底图上
2. 监听滑动动作，使用clearRect清除滑动部分的一小块画布即可

代码

view

  <style>
  .box{
    position: relative;
    width: 300px;
    height: 300px;
  }
   /* 获奖底图 */
  .prize{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: coral;
    font: 50px serif
  }
  /* canvas */
  #prize-mask{
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   z-index: 10;
  }
</style>
<div class="box"">
  <div class="prize">1000万</div>
  <canvas id="prize-mask" />
</div>
复制代码

js

const canvas = document.querySelector('#prize-mask')
const ctx = canvas.getContext('2d')

// 获取外层宽高并动态设置宽高
const { clientWidth: wrapWidth, clientHeight: wrapHeight} = document.querySelector('.box')
canvas.width = wrapWidth
canvas.height = wrapHeight

const { clientWidth: canvasWidth, clientHeight: canvasHeight } = canvas

const text = '大吉大利'

    // 设置一些canvas的属性
ctx.fillStyle='black'
ctx.fillRect(0,0,canvasWidth,canvasHeight)
ctx.font='50px serif'
ctx.strokeStyle='red'
ctx.strokeText(text, ( canvasWidth - ctx.measureText( text ).width ) / 2, canvasHeight / 2 )   //  文本居中
ctx.save()


const handleMouseMove = (event) =>{
ctx.clearRect(event.offsetX,event.offsetY,20,20);
}

const handleMouseDown = () => {
  canvas.addEventListener('mousemove', handleMouseMove)
}

canvas.addEventListener('mousedown', handleMouseDown)

 canvas.addEventListener('mouseup', (e)=>{
  canvas.removeEventListener('mousemove', handleMouseMove)
})
复制代码

效果

注意点

给canvas设置宽高,不要在class中设置，会造成拉伸/错乱等乱七八糟的问题

待续..