如何在 javascript/html 中将图像放置在画布球的顶部答案

【问题标题】：How do I place an image over top of canvas ball in javascript/html如何在 javascript/html 中将图像放置在画布球的顶部
【发布时间】：2021-01-26 05:28:25
【问题描述】：

我正在尝试将图像放置在当前画布球所在的位置。我有一个弹跳球，它在弹跳时使用真实的物理学。我想放置一个球的图像，而不是使用 2d 画布球。我已经尝试在其中放置一个图像，但它只是让我的程序变砖，我是否能够将图像添加到画布球的顶部并能够保持我应用于画布球的所有相同物理我怎么能做到这一点？

<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 && 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>

【问题讨论】：

您需要保留画布吗？或者只是移动一个球的 img 就可以了吗？我之所以这么问是因为我在保持动画以正确的帧速率运行方面取得了更大的成功，只是移动图像而不是每次都在画布上绘制它们。

标签： javascript html image canvas

【解决方案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 缩放这个 img 以适应半径。不过还没有测试过。

【讨论】：