当前位置: 首页 > 工具软件 > Lottery.js > 使用案例 >

canvas Lottery.js

石正卿
2023-12-01
  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);

转载于:https://www.cnblogs.com/zhoulingfeng/p/3394738.html

 类似资料:

相关阅读

相关文章

相关问答