canvas Lottery.js
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);
