"Here is an example of HTML code that creates a canvas element with a bouncing ball that changes color with each bounce:
<html> <head> <title>Bouncing Ball</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // Define initial position and velocity of ball var x = canvas.width/2; var y = canvas.height/2; var dx = 2; var dy = -2; // Define starting color var color = '#FF0000'; // Draw the ball function drawBall() { ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } // Update the position of the ball and change color on collision with wall function updateBall() { if(x + dx > canvas.width-30 || x + dx < 30) { dx = -dx; color = getRandomColor(); } if(y + dy > canvas.height-30 || y + dy < 30) { dy = -dy; color = getRandomColor(); } x += dx; y += dy; } // Generate a random color function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // Update and redraw the ball on each frame function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); updateBall(); requestAnimationFrame(animate); } animate(); </script> </body> </html>
This code creates a canvas element with an id of "myCanvas" and a width and height of 500 pixels. It then defines the initial position and velocity of a ball, as well as a starting color. The drawBall() function draws the ball on the canvas, and the updateBall() function updates the ball's position and changes its color on collision with the walls of the canvas. The getRandomColor() function generates a random color for the ball.
The animate() function is called on each frame of the animation to clear the canvas, draw and update the ball, and request the next frame using requestAnimationFrame(). This creates the illusion of a ball bouncing around the canvas, changing color with each bounce." -ChatGPT
No comments:
Post a Comment