forked from tw-yuan/free-anti-ddos-home
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcard.html
131 lines (115 loc) · 3.02 KB
/
card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="zh_TW" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box-wrap {
position: relative;
width: 300px;
height: 150px;
border: 1px solid #eeeeee;
}
.box {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: red;
letter-spacing: 20px;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- 刮刮乐 -->
<div class="box-wrap">
<div class="box" id="text">謝謝惠顧</div>
<canvas class="canvas" id="canvas" width="600" height="300"></canvas>
</div>
<script>
let canvas = document.querySelector('#canvas');
let text = document.querySelector('#text');
let ctx = canvas.getContext('2d');
let clientWidth = canvas.clientWidth;
let clientHeight = canvas.clientHeight;
let width = canvas.width
let height = canvas.height
// 缩放比例
let widthScale = width / clientWidth;
let heightScale = height / clientHeight;
// 绘制背景图
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, width, height);
ctx.save();
// 绘制文字
ctx.translate(width / 2, height / 2);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "50px 微軟正黑體"
ctx.fillStyle = 'white';
ctx.fillText('刮開查看獎項', 0, 0);
// ctx.fill();
ctx.restore();
// 监听鼠标事件
let isDraw = false;
canvas.onmousedown = function (e) {
// console.log(e);
isDraw = true;
}
canvas.onmouseup = function (e) {
// console.log(e);
isDraw = false;
}
canvas.onmousemove = function (e) {
if (!isDraw) {
return;
}
// console.log(e);
// ctx.fillStyle = 'white';
// 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的
ctx.globalCompositeOperation = 'destination-out'
// console.log(e.offsetX, e.offsetY);
ctx.arc(e.offsetX * widthScale, e.offsetY * heightScale, 30, 0, Math.PI / 180 * 360);
ctx.fill();
}
// 奖品设置
let list = [{
title: '一等獎',
probability: 0.1
},
{
title: '二等獎',
probability: 0.2
},
{
title: '三等獎',
probability: 0.3
}
]
let randomNum = Math.random();
console.log(randomNum);
let randomNumUpperBound = 0;
for (let item of list) {
randomNumUpperBound += item.probability
if (randomNum < randomNumUpperBound) {
text.innerText = item.title;
break;
}
}
</script>
</body>