物理运动学基础2

角度、和角速度的应用

废话不说直接画圆吧！各种角度圆里都有！

要画圆当然得有半径（radius）及其位置了也就是圆心，既然是画就得确定每次画的时候角度的偏移量angle！

var context,originX,originY,radius,angle,lineToX,lineToY;
const canvasWidth = canvasHeight = 200;
window.onload = function() {
	originX = canvasWidth/2;//原点
	originY = canvasHeight/2;
	radius = 30;//半径
	angle = 0;//角度


	context = document.getElementById("stage").getContext("2d");
	context.strokeStyle = "#ffffff";
	context.beginPath();
	context.moveTo(originX,originY);

	setInterval(draw, 1000 / 30);
};



function draw() {
	lineToX = originX + radius * Math.cos(angle*Math.PI / 180);
	lineToY = originY + radius * Math.sin(angle*Math.PI / 180);
	context.lineTo(lineToX,lineToY);
	context.stroke();
	angle++;
};

因为系统使用的是弧度制我们的angle是角度必须转换成弧度制才能使用转换公式：

angle*Math.PI / 180

现在我们也可以根据自己的需要自行设置位置，半径，角度等！你可以只画一半或者任意角度！

现在修改我们的代码画任意角度的线

var context,originX,originY,radius,angle,lineToX,lineToY;
const canvasWidth = canvasHeight = 200;
window.onload = function() {
	originX = canvasWidth/2;//原点
	originY = canvasHeight/2;
	radius = 60;//半径
	angle = 0;//角度


	context = document.getElementById("stage").getContext("2d");
	context.strokeStyle = "#ffffff";

	setInterval(draw, 1000 / 30);
};



function draw() {
	context.clearRect(0,0,canvasWidth,canvasHeight);

	context.beginPath();
	context.moveTo(originX,originY);

	lineToX = originX + radius * Math.cos(angle*Math.PI / 180);
	lineToY = originY + radius * Math.sin(angle*Math.PI / 180);
	context.lineTo(lineToX,lineToY);
	context.stroke();

	angle++;

};

现在把他添加到我们上一篇的小球当中让他一直跟随这小球

所以现在唯一的问题是球和线之间的角度

dx = ball.x- originX;

dy = ball.y- originY;

angle = Math.atan2(dy, dx) * 180 / Math.PI;

var context,originX,originY,radius,angle,lineToX,lineToY;

const canvasWidth = canvasHeight = 200;

var ball = {
	x : 50,
	y : 100,
	vx : 5,
	vy : 5,
	r : 10,
	g:0.98,
	draw : function(context) {
 this.checkBorder();
 context.strokeStyle = "#9b9b9b";
 context.fillStyle = "#ffffff";
 context.beginPath();
 context.arc(this.x, this.y, this.r, 0, Math.PI / 180 * 360, true);
 context.closePath();
 context.stroke();
 context.fill();
	},

	checkBorder : function() {
 if (ball.y - ball.r < 0 || ball.y + ball.r > canvasHeight)//up buttom

 ball.vy *= -1;
 if (ball.x - ball.r < 0 || ball.x + ball.r > canvasWidth)//left right

 ball.vx *= -1;

 if(ball.y+ball.r>canvasHeight)//防止重力加速度穿透

 ball.y = canvasHeight - ball.r;
	}
};

window.onload = function() {

	originX = canvasWidth/2;//原点

	originY = canvasHeight/2;

	radius = 60;//半径

	angle = 0;//角度

	context = document.getElementById("stage").getContext("2d");

	setInterval(update, 1000 / 30);
};

function update() {

	context.clearRect(0, 0, 500, 500);

	moveBall();

	var dx = ball.x- originX;

	var dy = ball.y- originY;

	angle = Math.atan2(dy, dx) * 180 / Math.PI;

	drawLine();
};

function moveBall(){

	ball.vy += ball.g;

	ball.y += ball.vy;

	ball.x += ball.vx;

	ball.draw(context);
};

function drawLine() {

	context.strokeStyle = "#ffffff";

	context.lineWidth = 3;

	context.beginPath();

	context.moveTo(originX,originY);

	lineToX = originX + radius * Math.cos(angle*Math.PI / 180);

	lineToY = originY + radius * Math.sin(angle*Math.PI / 180);

	context.lineTo(lineToX,lineToY);

	context.stroke();

	angle++;

};

一些基本的角度的应用，及角度的算法！愤怒的小鸟就可以利用这个算出鼠标拖拽后的鸟和原点的角度，然后根据已知角度算出角速度、力矩就是加速度

var vx = Math.cos(angle*Math.PI / 180) * speed;
var vy = Math.sin(angle*Math.PI / 180) * speed;

算出角速度应用x轴和y轴上！说那么多····写个小例子吧！


var context,canvas,originX,originY,radius,angle,lineToX,lineToY,isDown;
 const canvasWidth = canvasHeight = 500;  
var ball = { x : 50,y : 490,vx : 0,vy : 0,r : 20,g:0.98, 
	draw : function(context) {  
 this.checkBorder();  
 context.strokeStyle = "#9b9b9b";
 context.fillStyle = "#ffffff";
 context.beginPath();  
 context.arc(this.x, this.y, this.r, 0, Math.PI / 180 * 360, true);  
 context.closePath();  
 context.stroke();  
 context.fill(); 
	}, 
	
	checkBorder : function() {  
 if (ball.y - ball.r < 0 || ball.y + ball.r > canvasHeight)//up buttom  
 ball.vy *= -1;  
 if (ball.x - ball.r < 0 || ball.x + ball.r > canvasWidth)//left right  
 ball.vx *= -1;  
 if(ball.y+ball.r>canvasHeight)//防止重力加速度穿透  
 ball.y = canvasHeight - ball.r; 
	}  
};  
window.onload = function() { 
	originX = canvasWidth/2;//原点 
	originY = canvasHeight/2; 
	radius = 100;//半径 
	angle = 0;//角度 
	
	canvas = document.getElementById("stage") 
	context = canvas.getContext("2d"); 
	setInterval(update, 1000 / 30);



 canvas.addEventListener("mousedown",onMouseDown); 
 canvas.addEventListener("mousemove",onMouseMove); 
	canvas.addEventListener("mouseup",onMouseUp); 
};  
function onMouseDown(e){ 
	if(Math.abs(ball.x-e.offsetX)<ball.r && Math.abs(ball.y-e.offsetY)<ball.r){  
 isDown = true;  
 ball.vx = 0;  
 ball.vy = 0; 
	} 
};  
function onMouseMove(e){
 if(isDown){  
 ball.x=e.offsetX;  
 ball.y=e.offsetY;
 }  
};  
function onMouseUp(e){
 if(isDown){  
 //算角度
 var dx = originX - ball.x;
 var dy = originY - ball.y;
 angle = Math.atan2(dy, dx) * 180 / Math.PI;



 //算角速度  
 var speed = 4;  
 var vx = Math.cos(angle*Math.PI / 180) * speed;
 var vy = Math.sin(angle*Math.PI / 180) * speed;  
 ball.vx = vx; ball.vy = vy; isDown = false; 
	} 
};  
function update() { 
	context.clearRect(0, 0, 500, 500);



	moveBall(); 



	var dx = ball.x- originX;
	var dy = ball.y- originY;
 	angle = Math.atan2(dy, dx) * 180 / Math.PI;
	drawLine(); 
};  
function moveBall(){  
// if(!isDown)//拖拽的时候不受重力影响  
//	ball.vy += ball.g; 
 ball.y += ball.vy;
 ball.x += ball.vx;
 ball.draw(context);
 };  
function drawLine() {
 context.strokeStyle = "#ffffff";
 context.lineWidth = 3;
 context.beginPath();
 context.moveTo(originX,originY);
 lineToX = originX + radius * Math.cos(angle*Math.PI / 180);
 lineToY = originY + radius * Math.sin(angle*Math.PI / 180);
 context.lineTo(lineToX,lineToY);



 context.stroke();  
 angle++;
};

把MoveBall中的重力注释去掉应该就很像小鸟发射了，为了看得清楚射出的角度，就先注释掉了关于重力的部分！

posted @ 2012-03-11 19:05 _公孓℡ 阅读(326) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Just-go!

物理运动学基础2

公告