本文实例为大家分享了js+canvas实现刮刮奖的具体代码，供大家参考，具体内容如下
1.实现了PC端的刮刮奖效果
2.使用了canvas的文本，像素操作，合成，绘制图形，随机数
|
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
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 500px; height: 500px; margin: 0 auto; position: relative; background: #00BFFF; } #prize { width: 300px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; background: #fff; font-family: "微软雅黑"; font-size: 40px; text-align: center; line-height: 100px; -webkit-user-select: none; } #myCanvas { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; } </style> </head> <body> <div class="box"> <div id="prize"></div> <canvas id="myCanvas" width="300" height="100"></canvas> </div> </body> <script type="text/javascript"> //获取对象 var textArr = ["一等奖", "二等奖", "三等奖", "谢谢惠顾", "再来一次"]; var prize = document.getElementById("prize"); var num = Math.random() * 100; if (num <= 60) { prize.innerText = textArr[3]; } else if (num <= 70) { prize.innerText = textArr[4]; } else if (num <= 80) { prize.innerText = textArr[2]; } else if (num <= 90) { prize.innerText = textArr[1]; } else if (num <= 100) { prize.innerText = textArr[0]; } var myCanvas = document.getElementById("myCanvas"); // 搭建环境 var cxt = myCanvas.getContext("2d"); cxt.globalAlpha = 1; cxt.fillStyle = "#ccc"; cxt.fillRect(0, 0, 300, 100); var txt = "刮刮奖"; cxt.fillStyle = "#000"; cxt.font = "30px 微软雅黑"; cxt.textAlign = "center"; cxt.textBaseline = "middle"; cxt.fillText(txt, 150, 50, 300); var mX, mY; var flag = false; myCanvas.onmousedown = function(e) { flag = true; mX = e.offsetX; mY = e.offsetY; drawArc(mX, mY); } document.body.onmousemove = function(e) { if (flag == true) { mX = e.offsetX; mY = e.offsetY; drawArc(mX, mY); } } document.body.onmouseup = function() { flag = false; sayPrize(); } function drawArc(x, y) { cxt.globalCompositeOperation = "destination-out"; //相交部分不显示 cxt.beginPath(); cxt.fillStyle = "white"; cxt.moveTo(x, y); cxt.arc(x, y, 10, 0, 2 * Math.PI); cxt.fill(); } function sayPrize() { var myImg = cxt.getImageData(70, 30, 160, 40); // var myImg = cxt.getImageData(93, 37, 40, 30); // 设置像素点的颜色 var num = 0; var max = myImg.data.length / 4; for (var i = 0; i < myImg.data.length; i += 4) { if (myImg.data[i + 3] <= 200) { num++; } } //2/3*myImg.data.length/4 if (num >= max * 0.6) { alert("恭喜您,获得：" + prize.innerText); } } </script></html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_46690660/article/details/108500701
