物理运动学基础2

最新推荐文章于 2021-03-12 04:36:50 发布

转载最新推荐文章于 2021-03-12 04:36:50 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Just-go/archive/2012/03/11/2390513.html

角度、和角速度的应用

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

要画圆当然得有半径（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++;
};

Your browser does not support the canvas element.

因为系统使用的是弧度制我们的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++;

};

Your browser does not support the canvas element.

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

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

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++;

};

Your browser does not support the canvas element.

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

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++;

};

Your browser does not support the canvas element.

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

转载于:https://www.cnblogs.com/Just-go/archive/2012/03/11/2390513.html