canvas 刮刮卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#ggk {
width: 400px;
height: 100px;
position: relative;
text-align: center;
line-height: 100px;
border: 1px #ccc solid;
color: deeppink;
font-size: 20px;
}
#ggk .jp {
width: 400px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
#ggk #canvas {
width: 400px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="ggk">
<div class="jp"></div>
<canvas width="400 " height="100" id="canvas"></canvas>
</div>
</body>
<script>
/** @type {HTMLCanvasElement} */
let canvas = document.getElementById('canvas')
var ggkDom = document.querySelector('#ggk')
var jpDom = document.querySelector('.jp')
var ctx = canvas.getContext('2d')
ctx.fillStyle = "#ccc"
ctx.fillRect(0, 0, 400, 100)
ctx.font = "20px 黑体"
ctx.fillStyle = "#fff"
ctx.fillText('刮刮乐', 170, 50)
console.log(ctx);
var isDraw = false
//设置isDraw = true
canvas.onmousedown = function () {
isDraw = true
}
//鼠标移动的时候绘制圆
canvas.onmousemove = function (e) {
if (isDraw) {
ctx.beginPath()
var x = e.pageX - ggkDom.offsetLeft
var y = e.pageY - ggkDom.offsetTop
ctx.globalCompositeOperation = "destination-out"
ctx.arc(x, y, 20, 0, 2 * Math.PI)
ctx.fill()
ctx.closePath()
} else {
}
}
canvas.onmouseup = function () {
isDraw = false
}
var arr = [
{ content: '恭喜中奖：领克03-100台', p: 0.2 },
{ content: '恭喜中奖:哈佛h6-100台', p: 0.5 },
{ content: '恭喜中奖:领克06-100台', p: 0.6 },
{ content: '谢谢惠顾，嘻嘻', p: 0.7 },
{ content: '恭喜中奖:500万元现金', p: 0.8 },
]
var randomNum = Math.random()
console.log(randomNum);
console.log(jpDom.innerHTML);
if (randomNum <= arr[0].p) {
jpDom.innerHTML = arr[0].content
} else if (randomNum <= arr[1].p && randomNum >= arr[0].p) {
jpDom.innerHTML = arr[1].content
} else if (randomNum <= arr[2].p && randomNum >= arr[1].p) {
jpDom.innerHTML = arr[2].content
} else if (randomNum <= arr[3].p && randomNum >= arr[2].p) {
jpDom.innerHTML = arr[3].content
} else if (randomNum >= arr[3].p) {
jpDom.innerHTML = arr[4].content
}
</script>
</html>
