1 /*
2 * Lottery.js
3 * version 1.0
4 * @example Lottery(id, start, end, goods, callBack);
5 */
6
7 var Lottery = (function() {
8 var canvas,
9 render2D,
10 start,
11 end,
12 goods,
13 callBack,
14 canvasW,
15 canvasH,
16 timer = null,
17 goodNum = [],
18 flag;
19
20 function init(arg) {
21 start = parseInt(arg[0]) || 1;
22 end = parseInt(arg[1]) || 100;
23 goods = parseInt(arg[2]) || 10;
24 callBack = arg[3] || function(){};
25
26 if (parseInt(start) >= parseInt(end)) {
27 return;
28 }
29
30 // clearDraw
31 render2D.clearRect(0, 0, canvasW, canvasH);
32 drawNum();
33 drawMsg();
34 canvas.addEventListener('click', initBox, false);
35 }
36
37 function randomColor() {
38 var d = "0123456789abcdef", c = '', i = 6;
39 while(i--) c += d.charAt(Math.round(Math.random()*15));
40 return "#"+c;
41 }
42
43 function drawNum() {
44 var val = start,
45 rows = (end - start) / 10;
46
47 render2D.shadowColor = 'rgba(10,10,10,0.8)';
48 render2D.shadowOffsetX = 3;
49 render2D.shadowOffsetY = 3;
50 render2D.shadowBlur = 30;
51
52 for (var i = 0; i < rows; i++) {
53 for (var j = 0; j < 10; j++) {
54 render2D.fillStyle = randomColor();
55 render2D.fillRect(j*(50+3), i*(50+3), 50, 50);
56 render2D.fillStyle = "#ffffff";
57 render2D.fillText(val++, j*(50+3)+18, i*(50+3)+27);
58 if (end == i*10+j+start) return;
59 }
60 }
61 }
62
63 function drawMsg(gn) {
64 if (gn) {
65 // render2D.fillText(gn.join(' '), canvasW/2-90, canvasH/2-80);
66 // render2D.fillText(unescape("%u91CD%u65B0%u5F00%u59CB"), canvasW/2-30, canvasH/2-20);
67 render2D.shadowColor = 'rgba(10,10,10,0.8)';
68 render2D.shadowOffsetX = 3;
69 render2D.shadowOffsetY = 3;
70 render2D.shadowBlur = 30;
71 render2D.fillStyle = "rgba(0,0,0,.3)";
72 render2D.fillRect(0, 0, canvasW, canvasH);
73 gn.forEach(function(num, i) {
74 var pos = getXYRC(num);
75 render2D.fillStyle = randomColor();
76 render2D.beginPath();
77 render2D.arc(pos.row*(50+3)+24, pos.col*(50+3)+24, 30, 0 , Math.PI*2, true);
78 render2D.fill();
79 });
80
81 render2D.fillStyle = "#ffffff";
82 gn.forEach(function(num, i) {
83 var pos = getXYRC(num);
84 render2D.fillText(num, pos.row*(50+3)+18, pos.col*(50+3)+27);
85 });
86 } else {
87 flag = render2D.getImageData(canvasW/2-100, canvasH/2-100, 200, 200);
88 render2D.shadowColor = undefined;
89 render2D.shadowOffsetX = 0;
90 render2D.shadowOffsetY = 0;
91 render2D.shadowBlur = 10;
92
93 render2D.fillStyle = "rgba(0,0,0,.6)";
94 render2D.beginPath();
95 render2D.arc(canvasW/2, canvasH/2, 100, 0, Math.PI*2, true);
96 render2D.fill();
97 // render2D.stroke();
98
99 render2D.shadowColor = 'rgba(255,255,255,0.8)';
100 render2D.shadowOffsetX = 5;
101 render2D.shadowOffsetY = 5;
102 render2D.shadowBlur = 20;
103
104 render2D.beginPath();
105 render2D.strokeStyle = "#ffffff";
106 render2D.moveTo(canvasW/2-100+60, canvasH/2-100+40);
107 render2D.lineTo(canvasW/2-100+160, canvasH/2-100+100);
108 render2D.lineTo(canvasW/2-100+60, canvasH/2-100+160);
109 render2D.lineTo(canvasW/2-100+60, canvasH/2-100+40);
110 render2D.stroke();
111 render2D.closePath();
112 render2D.fillStyle = "rgba(255,255,255,.8)";
113 render2D.fill();
114
115 render2D.shadowColor = undefined;
116 render2D.shadowOffsetX = 0;
117 render2D.shadowOffsetY = 0;
118 render2D.shadowBlur = 0;
119 }
120 }
121
122 function initBox(e) {
123 if (canvasW/2-100 < e.clientX - canvas.offsetLeft
124 && e.clientX - canvas.offsetLeft < canvasW/2+100
125 && canvasH/2-100 < e.clientY - canvas.offsetTop
126 && e.clientY - canvas.offsetTop < canvasH/2+100) {
127
128 render2D.putImageData(flag, canvasW/2-100, canvasH/2-100);
129 flag = null;
130
131 play(function() {
132 drawMsg(goodNum);
133 callBack();
134 // canvas.addEventListener('click', initBox, false);
135 });
136 canvas.removeEventListener('click', initBox, false);
137 }
138 }
139
140 // 返回一个范围内的随机值
141 // 只传under表示取[1，under]
142 // 传under, over表示取[under，over]
143 function fandomNum(under, over) {
144 switch(arguments.length) {
145 case 1: return parseInt(Math.random() * under + 1);
146 case 2: return parseInt(Math.random() * (over - under + 1) + under);
147 default: return 0;
148 }
149 }
150
151 function changeColor() {
152 var i = goods, g = [];
153 while(i--) {
154 var r = fandomNum(start, end), pos = getXYRC(r);
155 render2D.fillStyle = randomColor();
156 render2D.fillRect(pos.x, pos.y, 50, 50);
157 render2D.fillStyle = "#ffffff";
158 render2D.fillText(r, pos.row*(50+3)+18, pos.col*(50+3)+27);
159 g.push(r);
160 }
161 goodNum = g;
162 }
163
164 function getXYRC(num) {
165 var row = (num - start) % 10;
166 var col = Math.floor((num - start) / 10);
167
168 return {x: row*(50+3), y: col*(50+3), row: row, col: col}
169 }
170
171 function play(callback) {
172 timer = setInterval(changeColor, 50);
173 setTimeout(function() {
174 clearInterval(timer);
175 callback();
176 }, 3000)
177 }
178
179 return function() {
180 var arg = Array.prototype.slice.call(arguments);
181 canvas = typeof arg[0] === 'string' ? document.getElementById(arg[0]) : arg[0];
182 if (typeof canvas == 'object') {
183 render2D = canvas.getContext('2d');
184 canvasW = canvas.width;
185 canvasH = canvas.height;
186 arg.shift();
187 init(arg);
188 }
189 }
190 })()
使用方式：
example:
//参数: canvas元素ID, 起始值，结束值，随机数数量，回调方法
@example Lottery(id, start, end, goods, callBack);