canvasapi及实现简易祖玛

Mrlinjw

2015-02-09

关注关注

一，canvas简介

1，我们说canvas，是一个html5的一种元素，通过使用javascript，可用于绘制图形，动画，图表，照片构图，或在飞行的任何其他可视化对象。

2，支持的浏览器，

Internet Explorer (9.0+)

Safari (3.0+)

Firefox (3.0+)

Chrome (3.0+)

Opera (10.0+)

iOS (1.0+)

Android (1.0+)

3，开始使用

<canvas id="canvas1" width="600" height="600"><span>不支持canvas浏览器</span></canvas>

如果这里不定义widht和height默认是宽300，高150

，

var oC = document.getElementById('c1');
	
var oGC = oC.getContext('2d');  //webgl : 3D绘图

，

//oGC.fillRect(50,50,100,100);//填充
	
oGC.strokeRect(50,50,100,100);//带边框的方块（这里会感觉到边框有两像素）换成下面的

（造成的原因：我们的画图跟在ps里面画图是一样的，我们从坐标为50，50处开始画图边框为1像素的方块，他从边框的1像素的中心处开始画，然后分成0.5。。计算机会自动给我填充成1像素。。所以看上去边框有两像素）
oGC.strokeRect(50.5,50.5,100,100);

，

var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	oGC.fillStyle = 'red';
	
	oGC.strokeStyle = 'blue';
	oGC.lineWidth = 10;
	
	oGC.fillRect(50,50,100,100);
	
	oGC.strokeRect(50.5,50.5,100,100);

这里有个顺序问题。

，

边界绘制

oGC.lineJoin = 'bevel';

，

oGC.beginPath();//开始
	
	oGC.moveTo(100,100);//移动
	
	oGC.lineTo(200,200);//线
	
	oGC.lineTo(300,200);//另一个线
	
	oGC.closePath();//闭合
	
	oGC.stroke();

，

oGC.beginPath();
	
	oGC.rect(100,100,100,100);//矩形
	
	oGC.closePath();
	
	oGC.fill();
	
	oGC.clearRect(0,0,oC.width,oC.height);//删除一个画布的矩形区域的

，

oGC.save();//保存路径
	
	oGC.fillStyle = 'red';
	
	oGC.beginPath();
	
	oGC.moveTo(100,100);
	
	oGC.lineTo(200,200);
	
	oGC.lineTo(300,200);
	
	oGC.closePath();
	
	oGC.fill();
	
	oGC.restore();//恢复路径

，

鼠标画线

<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	oC.onmousedown = function(ev){
		var ev = ev || window.event;
		oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
			oGC.stroke();
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};
	
};

</script>

，

方块运动

使用定时器来清除画布再次画

<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	setInterval(function(){
		
		num++;
		
		oGC.clearRect(0,0,oC.width,oC.height);
		
		oGC.fillRect(num,num,100,100);
		
	},30);
	
};

</script>

，

画圆，弧度

window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	oGC.moveTo(200,200);
	
	//弧度 = 角度*Math.PI/180
	
	oGC.arc(200,200,150,0,90*Math.PI/180,true);
	
	oGC.stroke();
	
};

，

可以来画个时钟

<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	function toDraw(){
		
		var x = 200;
		var y = 200;
		var r = 150;
		
		oGC.clearRect(0,0,oC.width,oC.height);
		
		var oDate = new Date();
		var oHours = oDate.getHours();
		var oMin = oDate.getMinutes();
		var oSen = oDate.getSeconds();
		
		var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
		var oMinValue = (-90 + oMin*6) * Math.PI/180;
		var oSenValue = (-90 + oSen*6) * Math.PI/180;
		
		
		/*oGC.moveTo(x,y);
		
		oGC.arc(x,y,r,0,6*Math.PI/180,false);
		
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/
		
		oGC.beginPath();
		
		for(var i=0;i<60;i++){
			oGC.moveTo(x,y);
			oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
		}
		
		oGC.closePath();
		
		oGC.stroke();
		
		
		
		oGC.fillStyle = 'white';
		
		oGC.beginPath();
		
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
		
		oGC.closePath();
		
		oGC.fill();
		
		
		oGC.lineWidth = 3;
		
		oGC.beginPath();
		
		for(var i=0;i<12;i++){
			oGC.moveTo(x,y);
			oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
		}
		
		oGC.closePath();
		
		oGC.stroke();
		
		
		oGC.fillStyle = 'white';
		
		oGC.beginPath();
		
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
		
		oGC.closePath();
		
		oGC.fill();
		
		
		oGC.lineWidth = 5;
		
		oGC.beginPath();
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
		
		oGC.closePath();
		oGC.stroke();
		
		oGC.lineWidth = 3;
		oGC.beginPath();
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
		
		oGC.closePath();
		oGC.stroke();
		
		
		oGC.lineWidth = 1;
		oGC.beginPath();
		oGC.moveTo(x,y);
		
		oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);
		
		oGC.closePath();
		oGC.stroke();
		
		
	}
	
	setInterval(toDraw,1000);
	
	toDraw();
	
};

</script>

，

绘制其他曲线

arcTo(x1,y1,x2,y2,r)

第一组坐标，第二组坐标，半径

quadraticCurveTo(dx,dy,x1,y1);

贝塞尔曲线，第一组控制点，第二组结束坐标

bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1);

贝塞尔曲线，第一组控制点，第二组控制点，第三组结束坐标

<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	/*

	oGC.moveTo(100,200);
	
	oGC.arcTo(100,100,200,100,50);
	
	oGC.stroke();
	
	oGC.moveTo(100,200);
	
	oGC.quadraticCurveTo(100,100,200,100);
	
	oGC.stroke();*/
	
	oGC.moveTo(100,200);
	
	oGC.bezierCurveTo(100,100,200,200,200,100);
	
	oGC.stroke();
	
};

</script>

，

变换

translate

偏移，从起点为基准点，移动当前坐标位置

rotate

旋转，参数为弧度

scale

缩放

<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	oGC.translate(100,100);
	
	oGC.rotate(20*Math.PI/180);
	oGC.rotate(25*Math.PI/180);
	
	oGC.scale(2,2);
	
	oGC.fillRect(0,0,100,100);
	
};

</script>

，

移动加缩放的方块

<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	var num = 0;
	
	var num2 = 0;
	
	var value = 1;
	
	
	setInterval(function(){
		
		
		
		num++;
		
		oGC.save();
		
		oGC.clearRect(0,0,oC.width,oC.height);
		
		oGC.translate(100,100);
		
		if(num2 == 100){
			value = -1;
		}
		else if(num2 == 0){
			value = 1;
		}
		
		num2 += value;
		
		oGC.scale( num2*1/50,num2*1/50 );
		
		oGC.rotate(num*Math.PI/180);
		
		oGC.translate(-50,-50);
		
		oGC.fillRect(0,0,100,100);
		
		oGC.restore();  
		
	},30);
	
};

</script>

这里未完待续，，，，，，，，，，，

二，使用canvas完成简易祖玛游戏直接上代码可以运行

<!DOCTYPE html>
<html>
<head>
	<title>html5canvasZM</title>
</head>
<style>
body,html,div,p{margin: 0; padding:0 }
body{ background: #000}
#zm{ background: #fff; width: 600px; margin: 20px auto}
</style>
<body>
<div id="zm">
	<canvas id="canvas1" width="600" height="600"></canvas>
</div>
<script>
window.onload = function(){
	var oC = document.getElementById('canvas1');
	var oGC = oC.getContext('2d');
	var i = 0;
	var yImg = new Image();
	yImg.src = "images/person.png";
	yImg.onload = function(){
		setInterval(function(){
			oGC.clearRect(0,0,oC.width,oC.height);
			//画出大圆的四分之三
			oGC.beginPath();
			oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);//弧度 = 角度*Math.PI/180
			//oGC.closePath();
			oGC.stroke();
			//画出第二大园的二分之一
			oGC.beginPath();
			oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
			oGC.stroke();
			//画出中间的小圆的全部
			oGC.beginPath();
			oGC.arc(400,200,20,0,360*Math.PI/180,false);
			oGC.stroke();

			for(var i=0; i<ball.length;i++){
				//画出小黑球
				oGC.beginPath();
				oGC.moveTo(ball[i].x,ball[i].y);
				oGC.arc(ball[i].x,ball[i].y,20,0,360*Math.PI/180,false);
				oGC.fill();
			}
			//中间青蛙的位置
			oGC.save();
			oGC.translate(300,200);
			oGC.rotate(iRotate);
			oGC.translate(-40,-40);
			oGC.drawImage(yImg,0,0);
			oGC.restore();

			for(var i=0;i<bullet.length;i++){
				//打出的红球
				oGC.save();
				oGC.fillStyle = 'red';
				oGC.beginPath();
				oGC.moveTo(bullet[i].x,bullet[i].y);
				oGC.arc(bullet[i].x,bullet[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
				oGC.fill();
				oGC.restore();
			}
			//画出简易祖玛字样
			oGC.save();
			oGC.font = '60px impact';
			oGC.textBaseline = 'top';
			oGC.fillStyle = '#404143';
			oGC.shadowOffsetX = 3;
			oGC.shadowOffsetY = 3;
			oGC.shadowColor = '#092253';
			oGC.shadowBlur = 5;
			var w = oGC.measureText('简易祖玛').width;
			var h = 60;
			oGC.fillText('简易祖玛', (oC.width - w)/2 , 450 );
			oGC.restore();

		},1000/60);

		setInterval(function(){
			for(var i=0; i<ball.length; i++){
				ball[i].num ++;

				if(ball[i].num == 270){
					ball[i].r = 150;
					ball[i].startX = 250;
					ball[i].startY = 50;
				}
				if(ball[i].num == 270 + 180){
					alert("游戏结束");
					window.location.reload();
				}

				ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
				ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;
			}

			for(var i=0;i<bullet.length;i++){
				bullet[i].x = bullet[i].x + bullet[i].sX;
				bullet[i].y = bullet[i].y + bullet[i].sY;
			}

			for(var i=0;i<bullet.length;i++){
				
				for(var j=0;j<ball.length;j++){
					
					if( pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y) ){
						
						bullet.splice(i,1);//碰撞后红球减掉
						ball.splice(j,1);//碰撞后黑球减掉
						break;
						
					}
					
				}
				
			}
		},30);

		var ball = [];
		setInterval(function(){
			ball.push({
				x : 300,
				y : 0,
				r : 200,
				num :0,
				startX : 300,
				startY : 0
			});
		},350);
		var iRotate = 0;
		oC.onmousemove = function(ev){//鼠标移动祖玛的头的朝向
			var ev = ev || window.event;
			var x = ev.clientX - oC.offsetLeft;
			var y = ev.clientY - oC.offsetTop;
			var a = x - 300;
			var b = y - 200;
			var c = Math.sqrt(a*a + b*b);
			if(a>0 && b>0){
				iRotate = Math.asin(b/c) + 90*Math.PI/180;
			}
			else if(a>0){
				iRotate = Math.asin(a/c);
			}
			
			if(a<0 && b>0){
				iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
			}
			else if(a<0){
				iRotate = Math.asin(a/c);
			}
		};
		var bullet = [];
		oC.onmousedown = function(ev){//鼠标按下发出红色小球
			var ev = ev || window.event;
			var x = ev.clientX - oC.offsetLeft;
			var y = ev.clientY - oC.offsetTop;
			var a = x - 300;
			var b = y - 200;
			var c = Math.sqrt(a*a + b*b);
			var speed = 5;
			var sX = speed * a/c;
			var sY = speed * b/c;
			bullet.push({
				x : 300,
				y : 200,
				sX : sX,
				sY : sY
			});
		}
	}
	//碰撞检测
	function pz(x1,y1,x2,y2){
		
		var a = x1 - x2;
		var b = y1 - y2;
		
		var c = Math.sqrt(a*a + b*b);
		
		if(c < 40){
			return true;
		}
		else{
			return false;
		}
		
	}
}
</script>
</body>
</html>

canvas 祖玛