欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用canvas画一个刮刮卡

程序员文章站 2022-05-20 22:51:27
...

这里是最终效果

思路

  1. 可以为canvas设置一个background的作为需要显示的目标图像,然后canvas绘制一个矩形作为遮罩层。或者通过position使用canvas覆盖在image标签上。

  2. 利用canvas的globalCompositeOperation属性可以很方便的操作绘图间的关系,详细可参考 w3school

  3. 因为消除后的图形为透明图形。可以使用getImageData抓取canvas中的图像数据来判断已消除的面积。

实现

把目标图像设置为background

this.canvas.style.background = `url(${this.CONFIG.backgroundUrl}) no-repeat center center`
this.canvas.style.backgroundSize = 'cover'
复制代码

绘制一个遮罩层

drawGrayMask(){
  this.context.fillStyle = this.CONFIG.fillColor
  this.context.fillRect(0,0,this.CONFIG.width, this.CONFIG.height)
}
复制代码

设置绘图效果

if (this.start){
  // 鼠标/手势 移动时,获取当前坐标 
  let x = e.touches ? e.touches[0].clientX : e.pageX
  let y = e.touches ? e.touches[0].clientY : e.pageY
  // 设置canvas属性
  this.context.globalCompositeOperation = 'destination-out'
  this.drawLine(x, y)

  this.CONFIG.startX = x
  this.CONFIG.startY = y
}
复制代码

判断绘制的图像占整个canvas的比例

// 获取当前透明的面积
for (let i=0; i<datas.length-3; i+=4){
  if (datas[i] === 0 && datas[i+1] === 0 && datas[i+2] === 0 && datas[i+3] === 0){
    transparent++
  }
}

// 当透明面积超过总面积50%,清除所有的遮罩层
if(transparent > this.CONFIG.width*this.CONFIG.height*0.5){
  this.run()
}
复制代码

清除整个遮罩层

clearCanvas(){
  // 绘制一个面积超过canvas面积的圆
  this.context.beginPath()
  this.context.globalCompositeOperation = 'destination-out'
  this.context.arc(this.CONFIG.width/2, this.CONFIG.height/2, this.CONFIG.currentRadius, 0, 2*Math.PI)
  this.context.fill()
  this.context.closePath()
}

update(){ 
  if (this.CONFIG.currentRadius < this.CONFIG.width || this.CONFIG.currentRadius<this.CONFIG.height){
    this.CONFIG.currentRadius *= this.CONFIG.clearSpeed
  }
}复制代码

转载于:https://juejin.im/post/5c874d03e51d455aa333e10b