html5 canvas 刮刮乐刮刮卡

2015-6-15 Linyuting.cn 博客札记

    HTML刮刮乐源码,主要利用CSS给canvas设置下获奖的背景图片,然后给他画个矩形覆盖掉CSS背景即可。

    为了方便调试,吧图片给base64了一下,有点长...


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线抽奖</title>
	</head>
	<body>
		<canvas id="canvas" width="200" height="80"></canvas>
		<script type="text/javascript">
		
		window.onload = function(){
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var drawing = false;//是否按下,如果按下了才允许刮
			
			function resetBG(){
				var bg = "";
				var rand = Math.random()*100;
				if(rand>90){
					bg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABQCAYAAABcbTqwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAWSSURBVHja7JzhdaJMFECfnm2ArwRSAlsCKSEpQUvAErQELWFTgpYgJSwlLBW48/15c/IyGRAUXcF7z+HEGBGMc3nvzQwzc84JAMSZ8y8AQBAABAFAEAAEAUAQAAQBQBAABAFAEABAEAAEAUAQAAQBQBAABAFAEAAEAUAQAAQBAAQB6M+PsX+Av7PZI59eoj/rHvukuh1GcYWd+Ko4RJDb8iYiv0VkLSJ5x30WIrIXkT/6M7/hueW6pS2vK3RLnvELnI19XawHjyC/TeOrRORdRMoe+yxFZHejc1trwxc9p9dIpEv0fLwcOz0nIghcTWEaeq0N8JwcC7PPR0c5Lr2yWxlWDWngIkgTP6hBYKjaozC/HzSlaXrtykglJuIUDftkul8uIl1C6EL3WV7xGd7HUhchyOPzK7iyv7UIcohEHGmRoy+2jil7pGzbIHoUsXMKUtxURDZz53YIAm25fW6iQKUNLWt5LjONz/89jBYSXMHTM8W1mLohN6J2abyLQOikY2dBNSU5EGR4Fi2FrzPPvweN76g/axH5GdQDv0xjXQbydOFD90nls8eq7T0yjR4+cmw6XBCsjKRY0CiHbVjLhsI3j+zn2UT2KY0g2QWCeEkKfa82QRIVsmvdsQiK/skJQi/WcGmVlSPWY1WZRpgFUrxIc5du1SJXV3Z6jJ8tDT7ResWnbasORbmtSTZz52oEgRgrlaLSx2XDVfygf09MIeykfUCwjtQffQnrmjTSabA14u5UXB9R1g1y2DGe3SS/WefcqLeTyCNtSc/XFycRp9v6TudYnET+mOO6k0iuf9ueRI76ORJ97F+zN58vD/Z/G3s7atoYSb8NmbnqVi05f24ix6ElSqRB6lNecE65RolYz9erOXZiolYuX7usSz2+fW4zd2411dQAQW5DrmnTLXjtmW7lmg7lkZ6tosN7ZvpZYiP2h7lzr1POnX+MVIo8KHR9rl4NfKisoZaoRvBvetMolkbqpY10H4gstbg/BpKE3dUI8qApzL0pOwjix0Ds73VDobsOGm6sdykL3qsLh0ih/i790zMfgZLgItHUjY0gcJZahpu3dOl7+bGYfUODbpvk6Hu53gI5/cDh5lm+SAQZjnCiYZeraxo87jrOkXVM+Q6aHpVn3iMzEtoBT4vv+q2e6UsdZZH+oDXIv/pH9i3aPWvz+fzU+kRFtdNNWsWY+v0g9GINx9gEaao39pGCvpGpC0KKNRyrSKF+DfYKH459JPJ1FLupsfct7rNIYd+W9iV/Z7Owl6ye0oxeIsjjYqefXBIlbA/ZPZnU2AhzsYavWXK57QIHSSQ6ABFkFBHklquQfLtSy9exlpDwhqqmsRjL0YjX9T768Dj13LlyKoJQg0yXtjlgTQ3dyuGnv7dKMneu73EQ5IkpzdX9WuwKJ7ugEd4ihdsGHQ5+3ayzkkwaprvfbVvo9PGs4+v3kenot9q25lhHfS4NpsUXsX2nOs3dbxTp92Ernzck7R+owE70vOyts0uTotl76tdao+TP9MUhyH3YmYbmG+W/XspzoQ0+lKMMUkYriRf8GKSA9GLRi3U1fUepbY/SUKPlmXxOQgwbd9syp5l8vSU3rLv8DOdSC/cDgiDIpalWJt8XRMjk64olfoq5XCFIanqm7JI/sd6uZYf39ystnruPZDd3bokgCHJpzt80FtE2hvIi/btSkzP1TqURbHeBeEWQmnlqEXmZ0uom1CD3pa3hNC0MvZLLxhlq+T4/zB/nXaW7ZM6Ujzj/yfc5YrupLf1DBHkcUk3B/Ih3Jd3uXjzHWqOJXxRi0AbsZ/PqLQiVDhwiCMAzQIoFgCAACAKAIAAIAoAgAAgCgCAACAKAIACAIAAIAoAgAAgCgCAACAKAIAAIAoAgAAgCAAgCgCAACAJwN/4fAF9Qzay5DyYpAAAAAElFTkSuQmCC";
				}
				else if(rand<=90 && rand>70){
					bg = "data:image/png;base64,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";
				}
				else if(rand<=70 && rand>40){
					bg = "data:image/png;base64,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";
				}
				else{
					bg = "data:image/png;base64,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";
				}
				canvas.style.background = "url("+bg+") no-repeat";
				ctx.fillStyle="#000000";
				ctx.fillRect(0,0,200,80);
			}
			
			var start = function(e){
				drawing = true;
			};
			var paint = function(e){
				e.preventDefault();
				if(drawing){
					var x,y;
					if(e.pageX && e.pageY){
						x=e.pageX-this.offsetLeft;
						y=e.pageY-this.offsetTop
					}
					else{
						x = e.changeTouches[0].pageX-this.offsetLeft;
						y = e.changeTouches[0].pageX-this.offsetTop;
					}
					with(ctx){
						globalCompositeOperation='destination-out';
						fillStyle='#ff0000';
						beginPath();
						moveTo(x,y);
						arc(x,y,15,0,Math.PI*2,false);
						fill();
					}
				}
			};
			var stop = function(e){
				drawing = false;
			};
			
			resetBG();
			canvas.addEventListener("touchstart", start, false);
			canvas.addEventListener("mousedown", start, false);
			canvas.addEventListener("touchmove",paint, false);
			canvas.addEventListener("mousemove",paint, false);
			canvas.addEventListener("touchend", stop, false);
			canvas.addEventListener("mouseup", stop, false);
		}
			
		</script>
	</body>
</html>


标签: HTML5 JavaScript

发表评论:

本站由emlog驱动 粤ICP备15042739号