本文實例為大家分享了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
|
<!DOCTYPE html><html><head> <meta name="keywords" content="風舞紅楓,前端技術,canvas"/> <meta name="description" content="風舞紅楓,前端技術,canvas,vue,react,node,個人博客"/> <meta charset="utf-8"> <title>刮刮卡</title> <link rel="icon" href="../image/icon2.ico" > <style type="text/css"> *{margin:0;padding:0;} html,body{height:100%;} body{overflow: hidden;} div{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:150px;text-align:center;line-height:150px;background:rgb(200,0,0);color:rgb(255,255,255);font-size:22px;} canvas{display: block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;filter:blur(0.7px);} </style></head><body> <div></div> <canvas></canvas></body><script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext("2d"); var Jackpots = ["一等獎","二等獎","三等獎","四等獎","獎勵獎"]; //一等獎概率2% 二等獎概率6% 三等獎概率14% 四等獎概率30% 獎勵獎概率48% var Jackpot = rand(0,49); if(Jackpot == 0){ div.innerHTML = Jackpots[0]; }else if(Jackpot>0 && Jackpot<4){ div.innerHTML = Jackpots[1]; }else if(Jackpot>3 && Jackpot<11){ div.innerHTML = Jackpots[2]; }else if(Jackpot>10 && Jackpot<26){ div.innerHTML = Jackpots[3]; }else{ div.innerHTML = Jackpots[4]; } context.beginPath(); context.fillStyle = "rgb(200,200,200)" context.moveTo(0,0); context.lineTo(300,0); context.lineTo(300,150); context.lineTo(0,150); context.lineTo(0,0); context.fill(); context.closePath(); context.beginPath(); context.font = '30px Arial'; context.fillStyle = "rgb(255,255,255)" context.fillText("刮刮卡", 110 , 90); context.fill(); context.closePath(); var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"]; for(var i = 0;i<50;i++){ context.beginPath(); context.fillStyle = fillColor[rand(0,3)]; context.arc(rand(20,280),rand(20,130),1,0,2*Math.PI); context.fill(); context.closePath(); } var flag = false; canvas.onmousedown = function(){ flag = true; } canvas.onmouseup = function(){ flag = false; } canvas.onmousemove = function(){ if(flag){ var e = event || window.event; var x = e.clientX - parseInt(div.offsetLeft); var y = e.clientY - parseInt(div.offsetTop); //console.log(x,y); context.beginPath(); context.arc(x,y,20,0,2*Math.PI); context.globalCompositeOperation="destination-out"; context.fill(); context.closePath(); } } //隨機n到m的一個整數 function rand(n,m){ var c = m - n + 1; return Math.floor(Math.random() * c + n); }</script></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_42231248/article/details/114383090
