在画布内移动球？

Question

 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const velocitySlider = document.getElementById('velocityRange'); const angleSlider = document.getElementById('angleRange'); let velocityOutput = document.getElementById('velocityValue'); let angleOutput = document.getElementById('angleValue'); angleOutput.innerHTML = angleSlider.value; // Display the default slider value velocityOutput.innerHTML = velocitySlider.value; // Update the current slider value (each time you drag the slider handle) angleSlider.oninput = function() { angleOutput.innerHTML = this.value; }; velocitySlider.oninput = function() { velocityOutput.innerHTML = this.value; }; function handleReset() { event.preventDefault(); angleSlider.value = 45; angleOutput.innerHTML = angleSlider.value; velocitySlider.value = 25; velocityOutput.innerHTML = velocitySlider.value; } var ball = { position: { x: 0, y: canvas.height } }; var T = 0; var oldTimeStamp = 0; var secondsPassed = 0; var animationSpeed = 500; var g = 0.0005; function handleSubmit() { // 👇️ prevent page refresh event.preventDefault(); var initialVelocity = velocitySlider.value; var initialAngle = angleSlider.value; animate(); console.log('animate'); } function animate(timeStamp) { secondsPassed = (timeStamp - oldTimeStamp) / 1000.0; oldTimeStamp = timeStamp; update(); draw(); window.requestAnimationFrame(animate); } function update() { T += animationSpeed * secondsPassed; } function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(20 + T, 20 + T, 10, 0, 2 * Math.PI); context.stroke(); }

 <canvas id="canvas"></canvas>

if you can help me moving the ball in the canvas , I am trying to simulate projectile motion

I take the angle & velocity from range input and I want to handle the submit function to call the animation after the user hit the button

Answer 1

Seeing that you have not done anything...
I'm just going to give you a small push to show movement on the X axis

 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); var ball = { x: 10, y: canvas.height-10, v: 25, a: 45 } var animationSpeed = 500; var g = 0.0005; function animate(time) { ball.x = ball.v * time / animationSpeed context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(ball.x, ball.y, 10, 0, 2 * Math.PI); context.fill(); window.requestAnimationFrame(animate); } animate();

 <canvas id="canvas" width=600 ></canvas>

Projectile motion is not trivial, but all the formulas are well documented, you can read more here:

https://en.wikipedia.org/wiki/Projectile_motion