HTML5 CANVAS 骰子

二毛妮子

2014-10-06

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript" src="jquery-1.9.1.js"></script>
  <script type="text/javascript">
  function Craps(v_ctx,v_dicex,v_dicey){
  	//画布的宽和高
  	var cWidth = 400;
  	var cHeight = 300;

  	//骰子的x,y
  	var dicex = 50;
  	var dicey = 50;

  	//骰子的高和宽
  	var diceWidth  = 100;
  	var diceHeight = 100;

  	//骰子中的圆点的半径
  	var dotrad = 6;

  	//画布对象
  	var ctx;

  	this.getCWidth = function(){
  		return cWidth;
  	};
  	this.setCWidth = function(v_cWidth){
  		cWidth = v_cWidth;
  	};
  	this.getCHeight = function(){
  		return cHeight;
  	};
  	this.setCHeight = function(v_cHeight){
  		cHeight = v_cHeight;
  	};
  	this.getDicex = function(){
  		return dicex;
  	};
  	this.setDicex = function(v_dicex){
  		dicex = v_dicex;
  	};
  	this.getDicey = function(){
  		return dicey;
  	};
  	this.setDicey = function(v_dicey){
  		dicey = v_dicey;
  	};
  	this.getDiceWidth = function(){
  		return diceWidth;
  	};
  	this.setDiceWidth = function(v_diceWidth){
  		diceWidth = v_diceWidth;
  	};
  	this.getDiceHeight = function(){
  		return diceHeight;
  	};
  	this.setDiceHeight = function(v_diceHeight){
  		diceHeight = v_diceHeight;
  	};
  	this.getDotrad = function (){
  		return dotrad;
  	};
  	this.setDotrad = function(v_dotrad){
  		dotrad = v_dotrad;
  	};
  	this.getCtx = function(){
  		return ctx;
  	};
  	this.setCtx = function(v_ctx){
  		ctx = v_ctx;
  	};
  	this.setCtx(v_ctx);
  	if(v_dicex){
  		this.setDicex(v_dicex);
  	};
  	if(v_dicey){
  		this.setDicey(v_dicey);
  	}
  }

  Craps.prototype = {

  		init : function (){
  			this.getCtx().fillStyle = 'rgb(0,0,0)';
	  		this.getCtx().strokeStyle = 'rgb(0,0,0)';
  			this.getCtx().lineWidth = 5;
	  		this.getCtx().clearRect(this.getDicex(),this.getDicey(),this.getDiceWidth(),this.getDiceHeight());
	  		this.getCtx().strokeRect(this.getDicex(),this.getDicey(),this.getDiceWidth(),this.getDiceHeight());
	  		var ch = 1 + Math.floor(Math.random()*6);
	  		console.log('ch='+ch);
	  		switch(ch){
	  			case 1:
	  				this.draw1(ch);
	  				break;
	  			case 2:
	  				this.draw2();
	  				break;
	  			case 3:
	  				this.draw3();
	  				break;
	  			case 4:
	  				this.draw4();
	  				break;
	  			case 5:
	  				this.draw5();
	  				break;
	  			default:
	  				this.draw6();
	  		}
  		},

	  	draw1 : function (ch){
	  		this.getCtx().beginPath();
	  		if(ch && ch == 1){
	  			this.getCtx().strokeStyle = 'rgb(255,0,0)';
	  			this.getCtx().fillStyle = 'rgb(255,0,0)';
	  			this.setDotrad(10);
	  		}
	  		var x = this.getDicex() + 0.5 * this.getDiceWidth();
	  		var y = this.getDicey() + 0.5 * this.getDiceHeight();
	  		this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
	  		this.getCtx().closePath();
	  		this.getCtx().fill();
	  		this.setDotrad(6);
	  	},

	  	draw2 : function (){
	  		this.getCtx().beginPath();
	  		var x = this.getDicex() + 3 * this.getDotrad();
	  		var y = this.getDicey() + 3 * this.getDotrad();
	  		this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
	  		x = this.getDicex() + this.getDiceWidth() - 3 * this.getDotrad();
	  		y = this.getDicey() + this.getDiceHeight() - 3 * this.getDotrad();
	  		this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
	  		this.getCtx().closePath();
	  		this.getCtx().fill();
	  	},

		draw3 : function (){
	  		this.draw1();
	  		this.draw2();
	  	},

	 	draw4 : function (){
			this.draw2();
			this.getCtx().beginPath();
			var x = this.getDicex() + 3 * this.getDotrad();
			var y = this.getDicey() + this.getDiceHeight() - 3 * this.getDotrad();
			this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
			x = this.getDicex() + this.getDiceWidth() - 3 * this.getDotrad();
			y = this.getDicey() + 3 * this.getDotrad();
			this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
			this.getCtx().closePath();
			this.getCtx().fill();
	 	},

	 	draw5 : function (){
	 		this.draw4();
	 		this.draw1();
	 	},

	 	draw6 : function (){
	 		this.draw4();
	 		this.getCtx().beginPath();
	 		var x = this.getDicex() + 3 * this.getDotrad();
	 		var y = this.getDicey() + 0.5 * this.getDiceHeight();
	 		this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
	 		x = this.getDicex() + this.getDiceWidth() - 3 * this.getDotrad();
	 		this.getCtx().arc(x,y,this.getDotrad(),0,Math.PI*2,true);
	 		this.getCtx().closePath();
	 		this.getCtx().fill();
	 	}
 	}

  	$(function(){
  		var ctx = $('#canvas').get(0).getContext('2d');
  		var crapsA = new Craps(ctx);
  		crapsA.init();
  		var crapsB = new Craps(ctx,170,50);
  		crapsB.init();
  	});

  </script>
 </head>
 <body>
  	<canvas id="canvas" width="400px" height="300px">
  		您的浏览器不支持canvas!
  	</canvas>
 </body>
</html>

HTML5 CANVAS 骰子