刮刮乐

示例

代码

html

<div id="ggk">谢谢惠顾</div>
<canvas id="myCanvas" width="600" height="400">当前浏览器不支持canvas，请下载最新的浏览器</canvas>

// 1.找到画布
var canvas = document.getElementById('canvas')
var ggk = document.getElementById('ggk')
//  2.获取画笔
var context = myCanvas.getContext('2d')
context.fillStyle = '#ccc'
context.fillRect(0, 0, 600, 400)

var isDraw = false
myCanvas.onmousedown = function () {
  isDraw = true
}
myCanvas.onmouseup = function () {
  isDraw = false
}
context.globalCompositeOperation = 'destination-out'
myCanvas.onmousemove = function (e) {
  if (isDraw) {
    context.beginPath()
    context.arc(e.pageX, e.pageY, 20, 0, Math.PI * 2)
    context.fill()
    context.closePath()
  }
}

let random = Math.random()
console.log(random)
if (random < 0.1) {
  ggk.textContent = '一等奖'
} else if (random < 0.2) {
  ggk.textContent = '二等奖'
} else if (random < 0.5) {
  ggk.textContent = '三等奖'
} else {
  ggk.textContent = '谢谢惠顾'
}

刮刮乐 ​

示例 ​

代码 ​

刮刮乐

示例

代码