你的位置:首页 > 网页设计

[网页设计]canvas学习之圆周运动


html部分

......<body><canvas id="myCanvas" width="400" height="400" ></canvas><!-- 给动画添加控制按钮 --><div>    <button id="startAnimation">Start</button>    <button id="stopAnimation">Stop</button></div>......

圆周运动
相关知识:三角函数
方法:将形状放在周长上角度为0弧度的位置,该位置位于右手边,在每次动画循环中,只需增加位于圆周上的形状的角度,就可以使形状沿着圆周运动。
需要解决的问题:
如何计算位于圆周上形状的(x,y)坐标值
解决:需要知道三角形邻边和对边的长度,分别代表x,y的位置

var angle = 45;var adjRatio = Math.cos(angle*(Math.PI/180));  // 余弦-斜边-邻边var oppRatio = Math.sin(angle*(Math.PI/180));  // 正弦-对边-斜边var radius = 50;var x = radius * adjRatio;var y = radius * oppRatio;

位置:定义shape类,并向其添加属性,

var shape = function(x,y,canvasWidth,canvasHeight){ 	this.x = x; 	this.y = y; 	this.width = width; 	this.height = height; 	this.radius = Math.random()*30;  // 介于0~30之间的随机半径 	this.angle = 0;  // 起始的角度值}

计算位于圆周上当前角度的形状多对应的x,y的值,
圆周通过半径定义
注意:形状对象中定义的点(x,y)现在引用的是圆周的中心---形状围绕它旋转的点,而不是起点

var x = temshape.x+(temshape.radius*Math.cos(temshape.angle*(Math.PI/180)));var y = temshape.y+(temshape.radius*Math.sin(temshape.angle*(Math.PI/180)));temshape.angle+=5;  // 增加旋转的角度if(temshape.angle>360){	temshape.angle=0;}

将新的x,y变量添加到fillRect中

context.fillRect(x,y,temshape.width,temshape.height)   // 画矩形

---------------------------完整代码--------------------------------

<script>    function draw1(id){		var myCanvas = $('#myCanvas');		var context = myCanvas.get(0).getContext('2d'); 		var canvasWidth = myCanvas.width();		var canvasHeight = myCanvas.height();		var startButton = $('#startAnimation'); 		var stopButton = $('#stopAnimation'); 		var playAnimation = true; 		startButton.hide(); 		startButton.click(function(){ 			$(this).hide(); 			stopButton.show(); 			playAnimation = true; 			animate(); 		}) 		stopButton.click(function(){ 			$(this).hide(); 			startButton.show(); 			playAnimation = false; 		}) 		var shape = function(x,y,canvasWidth,canvasHeight){ 			this.x = x; 			this.y = y; 			this.width = width; 			this.height = height; 			this.radius = Math.random()*30;  // 介于0~30之间的随机半径 			this.angle = 0;  // 起始的角度值 		} 		var shapes = new Array();	        for(var i = 0;i<10;i++){	          var x = Math.random()*250;	            var y = Math.random()*250;	            var width = height = Math.random()*50;	            shapes.push(new shape(x,y,width,height));	        } 			function animate(){ 				context.clearRect(0,0,canvasWidth,canvasHeight); // 擦除 				var shapesLength = shapes.length;		    for(var i=0;i<shapesLength;i++){		      var temshape = shapes[i];		     	var x = temshape.x+(temshape.radius*Math.cos(temshape.angle*(Math.PI/180)));		     	var y = temshape.y+(temshape.radius*Math.sin(temshape.angle*(Math.PI/180)));		     	temshape.angle+=5;		     	if(temshape.angle>360){		     		temshape.angle=0;		     	}		      context.fillRect(x,y,temshape.width,temshape.height)  // 画矩形		    }; 				if(playAnimation){ 					setTimeout(animate,33); 				} 			}animate();		}draw1('#myCanvas');</script>

上图,矩形做圆周运动。