首页给我写一个鱼儿游动的网页

给我写一个鱼儿游动的网页

时间: 2023-12-15 22:05:10 浏览: 126

好的，我可以为您提供一个基于HTML5 Canvas的鱼儿游动的动态效果。以下是代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鱼儿游动</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 鱼儿对象 var fish = { x: canvas.width / 2, // 初始X坐标 y: canvas.height / 2, // 初始Y坐标 radius: 20, // 半径 color: '#ff9800', // 颜色 speed: 2, // 移动速度 angle: Math.random() * 360, // 移动方向 draw: function() { // 绘制鱼儿 ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); }, update: function() { // 更新鱼儿状态 this.x += this.speed * Math.cos(this.angle * Math.PI / 180); this.y += this.speed * Math.sin(this.angle * Math.PI / 180); if (this.x < this.radius || this.x > canvas.width - this.radius) { this.angle = 180 - this.angle; } if (this.y < this.radius || this.y > canvas.height - this.radius) { this.angle = -this.angle; } } }; // 循环绘制和更新场景 function drawScene() { ctx.clearRect(0, 0, canvas.width, canvas.height); fish.draw(); fish.update(); } setInterval(drawScene, 20); // 每20毫秒更新一次 </script> </body> </html> 如果您将以上代码保存为一个名为“fish.html”的文件，并在浏览器中打开该文件，您将会看到一个随机移动的橙色圆圈，类似于一条游动的鱼儿。

阅读全文