Блог

Я пытаюсь поместить изображение на место, где находится мой текущий шар холста. У меня есть прыгающий шар, который использует реальную физику при подпрыгивании. Я хочу поместить изображение шара вместо использования 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>
  

вместо:

 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, чтобы оно соответствовало радиусу.
Хотя я его не тестировал.