html5 canvas簡單學習

時間 2019-11-12

原文原文鏈接

今天上班着實比較清閒，謠傳公司後期會用html5作些小遊戲，就順道學習了一下HTML5的canvas，順便用canvas畫了一個擲骰子的小demo。高手請繞道。 html

<!DOCTYPE>
<html>
	<title></title>
	<head>
		<script>
			var leftX = 150;
			var topY = 100;
			var diceX = 80;
			var diceY = 80;
			var dotR = 4;
		    var count = 0;
			var lastNum = 0;
			var flag = false;
			
			function clickMe() {
				count = 0;
				if(flag) {
					return false;
				}
				flag = true;
			    var ctx = document.getElementById("canvas").getContext('2d');
				ctx.beginPath();
				//ctx.arc(100,100,50,0,Math.PI,false);
			    ctx.strokeRect(leftX,topY,diceX,diceY);
				
			   setTimeout(function(){
					random(ctx);
			   },200);
				
			}
			
			function drawDice(ctx,randomNum) {
				ctx.clearRect(leftX,topY,diceX,diceY);
					switch(randomNum) {
						case 1:
							draw1();
						    break;
						case 2:
							draw2();
						    break;
						case 3:
							draw3();
						    break;
						case 4:
							draw4();
						    break;
						case 5:
							draw5();
						    break;
						case 6:
							draw6();
						    break;
					}
					count++;
					if(count>=20) {
						if(randomNum==6) {
							alert("哇！你走狗屎運啦，今天能夠去買彩票啦");
						} else if(randomNum <=3) {
							alert("今天運氣不太好哦！再試一把");
						} else {
							alert("請再接再礪，在來一把");
						}
						flag = false;
						return false;
					} else {
						setTimeout(function(){
							random(ctx);
					   },200-count);
					}
			}
			
			function random(ctx) {
				var randomNum = Math.floor(Math.random()*6)+1;
				if(randomNum == lastNum) {
					random(ctx)
				} else {
					lastNum = randomNum;
					drawDice(ctx,randomNum);
				}
				
			}
			
			function commonDraw(ctx,dotX,dotY) {
				ctx.beginPath();
				ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false);
				ctx.stroke();
				ctx.fill(); 
			}
			
			function draw1() {
				var ctx = document.getElementById("canvas").getContext('2d');
				ctx.fillStyle="#0000ff";
				var dotX = leftX+diceX/2;
				var dotY = topY+diceY/2;
				commonDraw(ctx,dotX,dotY);
			}
			
			function draw2() {
				var ctx = document.getElementById("canvas").getContext('2d');
				ctx.fillStyle="#99FF66";
				var dotX = leftX+4*dotR;
				var dotY = topY+4*dotR;
				commonDraw(ctx,dotX,dotY);
				var dotX = leftX+diceX-4*dotR;
				var dotY = topY+diceY-4*dotR;
				commonDraw(ctx,dotX,dotY);
			}
			
			function draw3() {
				draw1();
				draw2();
			}
			
			function draw4() {
				draw2();
				var ctx = document.getElementById("canvas").getContext('2d');
				ctx.fillStyle="#99CC00";
				var dotX = leftX+diceX-4*dotR;
				var dotY = topY+4*dotR;
				commonDraw(ctx,dotX,dotY);
				var dotX = leftX+4*dotR;
				var dotY = topY+diceY-4*dotR;
				commonDraw(ctx,dotX,dotY);
			}
			
			function draw5(){
				draw1();
				draw4();
			}
			
			function draw6(){
				var ctx = document.getElementById("canvas").getContext('2d');
				ctx.fillStyle="#996633";
				var dotX = leftX+4*dotR;
				var dotY = topY+diceY/2
				commonDraw(ctx,dotX,dotY);
				var dotX = leftX+diceY-4*dotR;
				commonDraw(ctx,dotX,dotY);
				draw4();
			}
			
			function  init() {
				var ctx = document.getElementById("canvas").getContext('2d');
				ctx.beginPath();
			    ctx.strokeRect(leftX,topY,diceX,diceY);
				ctx.stroke();
				draw6();
				
			}
		</script>
	</head>
	
	<body onload="init();">
		<canvas id="canvas" width="400" height="300" style="background-color:#CCFFCC">
			your brower is not support html5
		</canvas>
		
		<input type="button" value="擲骰子" onclick="clickMe();"/>
	</body>
</html>