#javascript #html #image #canvas
#javascript #HTML #изображение #холст
Вопрос:
Я пытаюсь поместить изображение на место, где находится мой текущий шар холста. У меня есть прыгающий шар, который использует реальную физику при подпрыгивании. Я хочу поместить изображение шара вместо использования 2d canvas ball. Я пытался поместить изображение, но оно просто блокирует мою программу, смогу ли я добавить изображение поверх шара canvas и сохранить ту же физику, которую я применил к шару canvas Как я мог этого добиться?
<script src="script.js"></script>
<canvas id="canvas" height="1080" width="1920">3D Ball</canvas>
<script>
var width = 1410;
var height = 800;
var canvas = ctx = false;
var frameRate = 1/40;
var frameDelay = frameRate * 1000;
var loopTimer = false;
var ball = {
position: {x: width/2, y: 0},
velocity: {x: 10, y: 0},
mass: 0.1,
radius: 15,
restitution: -0.7
};
var Cd = 0.47;
var snd = new Audio("bounce.mp3");
var rho = 1.22;
var A = Math.PI * ball.radius * ball.radius / (10000);
var ag = 9.81;
var mouse = {x: 0, y: 0, isDown: false};
var msg = "physics ball";
function getMousePosition(e) {
mouse.x = e.pageX - canvas.offsetLeft;
mouse.y = e.pageY - canvas.offsetTop;
}
var mouseDown = function(e) {
if (e.which == 1) {
getMousePosition(e);
mouse.isDown = true;
ball.position.x = mouse.x;
ball.position.y = mouse.y;
}
}
var mouseUp = function(e) {
if (e.which == 1) {
mouse.isDown = false;
ball.velocity.y = (ball.position.y - mouse.y) /10;
ball.velocity.x = (ball.position.x - mouse.x) / 10;
}
}
var setup = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.onmousemove = getMousePosition;
canvas.onmousedown = mouseDown;
canvas.onmouseup = mouseUp;
ctx.fillStyle = 'red';
ctx.strokeStyle = '#000000';
loopTimer = setInterval(loop, frameDelay);
}
var loop = function() {
if ( ! mouse.isDown) {
var Fx = -0.5 * Cd * A * rho * ball.velocity.x * ball.velocity.x * ball.velocity.x / Math.abs(ball.velocity.x);
var Fy = -0.5 * Cd * A * rho * ball.velocity.y * ball.velocity.y * ball.velocity.y / Math.abs(ball.velocity.y);
Fx = (isNaN(Fx) ? 0 : Fx);
Fy = (isNaN(Fy) ? 0 : Fy);
var ax = Fx / ball.mass;
var ay = ag (Fy / ball.mass);
ball.velocity.x = ax*frameRate;
ball.velocity.y = ay*frameRate;
ball.position.x = ball.velocity.x*frameRate*100;
ball.position.y = ball.velocity.y*frameRate*100;
}
if (ball.position.y > height - ball.radius){
snd.play();
}
if (ball.velocity.x == 0 amp;amp; ball.velocity.y == 0) {
snd.pause();
}
if (ball.position.y > height - ball.radius) {
ball.velocity.y *= ball.restitution;
ball.position.y = height - ball.radius;
}
if (ball.position.x > width - ball.radius) {
ball.velocity.x *= ball.restitution;
ball.position.x = width - ball.radius;
}
if (ball.position.x < ball.radius) {
ball.velocity.x *= ball.restitution;
ball.position.x = ball.radius;
}
ctx.clearRect(0,0,width,height);
ctx.save();
ctx.translate(ball.position.x, ball.position.y);
ctx.beginPath();
ctx.arc(0, 0, ball.radius, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
ctx.restore();
ctx.fillStyle = "blue";
ctx.font = "20px Arial";
ctx.fillText(msg, 1300,20);
if (mouse.isDown) {
ctx.beginPath();
ctx.moveTo(ball.position.x, ball.position.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
ctx.closePath();
}
}
setup();
</script>
Комментарии:
1. Вам нужно сохранить холст? Или просто переместить изображение шара будет в порядке? Я спрашиваю, потому что я добился большего успеха в поддержании анимации с правильной частотой кадров, просто перемещая изображения, а не рисуя их на холсте каждый раз.
Ответ №1:
вместо:
ctx.translate(ball.position.x, ball.position.y);
ctx.beginPath();
ctx.arc(0, 0, ball.radius, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
попробуйте что-то вроде:
ctx.drawImage(document.getElementById("ball_img", ball.position.x, ball.position.y)
И в вашем html у вас должно быть что-то вроде:
<img id="ball_img" src="your_ball_img.png">
Предположительно, вы могли бы масштабировать это изображение с помощью css, чтобы оно соответствовало радиусу.
Хотя я его не тестировал.