物理运动学基础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中的重力注释去掉应该就很像小鸟发射了,为了看得清楚射出的角度,就先注释掉了关于重力的部分!