canvas三角函数直线运动

Posted 2020-08-21

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
// var x=centerX,y=centerY,speedX=1,speedY=0,radius=10;
function Ball(x, y, radius, speed) {
this.x = x;
this.y = y;
this.radius = radius;
this.speed = speed;
}

function Getrandom(min, max) {
return(Math.random() * (max - min) + min);
}
var ball = [];
document.querySelector("#btn").onclick = function() {
var speed = {
x: 0,
y: 0
};
if(Math.random() >= 0.5)
speed.x = Getrandom(-6, 6);
else
speed.y = Getrandom(-6, 6);
ball.push(new Ball(centerX, centerY, 10, speed))
console.log(ball);
}

function drawBall() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < ball.length; i++) {
var b = ball[i];
cxt.beginPath();
// b.x +=b.speed.x;
// b.y += b.speed.y;
var vx = Math.cos(1 * Math.PI / 180);
var vy = Math.sin(1 * Math.PI / 180);
console.log(vx, vy);
b.x += vx;
b.y += vy;
// if(b.x >= (canvas.width - b.radius * 2) || b.x <= 0 + b.radius * 2)
// b.speed.x = -b.speed.x;
// console.log(x,canvas.width-radius*2)
// if(b.y >= (canvas.height - b.radius * 2) || b.y <= 0)
// b.speed.y= -b.speed.y;
cxt.arc(b.x, b.y, b.radius, 0, Math.PI * 2, true);
cxt.fillStyle = "red";
cxt.fill();
cxt.closePath();
}
requestAnimationFrame(drawBall);
}
drawBall();