今天用canvas教大家仿寫一個簡單的刮刮樂
一個居中的標題和刮卡區(qū)域踪蹬。
<h1 style="text-align: center;">刮刮樂</h1>
<div id="ggk">
<div class="jp">不抽大嘴巴子</div>
<canvas id="canvas" width="400" height="100"></canvas>
</div>
添加樣式
#ggk {
width: 400px;
height: 100px;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.jp,
canvas {
position: absolute;
width: 400px;
height: 100px;
left: 0;
top: 0;
text-align: center;
font-size: 25px;
line-height: 100px;
color: deeppink;
}
鼠標拖拽不會選中文字。
document.addEventListener("selectstart", function (e) {
e.preventDefault();
})
設置Canvas畫布。
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'darkgray';
ctx.fillRect(0, 0, 400, 100);
判斷鼠標是否按下歼疮。
let isDraw = false;
canvas.onmousedown = function () {
isDraw = true;
}
鼠標按下isDraw為true的話，才可以涂抹诈唬，把Canvas的灰色涂抹掉腋妙。
let ggkDom = document.querySelector('#ggk');
let jp = document.querySelector('.jp');
canvas.onmousemove = function (e) {
if (isDraw) {
let x = e.pageX - ggkDom.offsetLeft + ggkDom.offsetWidth / 2;
let y = e.pageY - ggkDom.offsetTop;
ctx.beginPath();
ctx.arc(x, y, 30, 0, 2 * Math.PI);
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();
ctx.closePath();
}
}
鼠標彈起時，isDraw為flase
document.onmouseup = function () {
isDraw = false;
}
設置獎品讯榕，p是中獎率骤素。
let arr = [
{ content: '一等獎：一個大嘴巴子', p: 0.1 },
{ content: '二等獎：兩個大嘴巴子', p: 0.2 },
{ content: '三等獎：三個大嘴巴子', p: 0.3 }
];
創(chuàng)建一個隨機數(shù)
let sj = Math.random();
隨機數(shù)去判斷，判斷成功后愚屁，返回成功的值济竹。
if (sj < arr[0].p) {
jp.innerHTML = arr[0].content;
} else if (sj < arr[1].p) {
jp.innerHTML = arr[1].content;
} else if (sj < arr[2].p) {
jp.innerHTML = arr[2].content;
}
