代码揭秘：如何用 HTML 和 JS 实现炫酷写轮眼动画

你提供的代码没有写完，下面是完整且优化后的代码，实现了写轮眼动画效果： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>写轮眼动画</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <script> // 获取canvas元素和它的2D上下文 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 定义写轮眼的基本属性 const eyeRadius = 80; const pupilRadius = 20; const tomoeRadius = 10; let tomoeRotation = 0; function drawEye() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制眼球（白色） ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, eyeRadius, 0, 2 * Math.PI); ctx.fillStyle = 'white'; ctx.fill(); // 绘制瞳孔（黑色） ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, pupilRadius, 0, 2 * Math.PI); ctx.fillStyle = 'black'; ctx.fill(); // 绘制写轮眼的勾玉 for (let i = 0; i < 3; i++) { let angle = (i * (2 * Math.PI / 3)) + tomoeRotation; let x = canvas.width / 2 + (eyeRadius - tomoeRadius) * Math.cos(angle); let y = canvas.height / 2 + (eyeRadius - tomoeRadius) * Math.sin(angle); ctx.beginPath(); ctx.arc(x, y, tomoeRadius, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); } // 更新勾玉的旋转角度 tomoeRotation += 0.01; // 循环调用drawEye函数实现动画效果 requestAnimationFrame(drawEye); } // 开始绘制动画 drawEye(); </script> </body> </html> ``` 代码解释 1. 获取元素和上下文：通过`document.getElementById`获取`canvas`元素，再使用`getContext('2d')`获取2D绘图上下文。 2. 定义属性：定义了写轮眼的眼球半径、瞳孔半径、勾玉半径和勾玉的初始旋转角度。 3. `drawEye`函数： - 清空画布，避免绘制重叠。 - 绘制白色的眼球和黑色的瞳孔。 - 使用`for`循环绘制3个勾玉，根据角度计算勾玉的位置并绘制。 - 更新勾玉的旋转角度，使勾玉旋转。 - 使用`requestAnimationFrame`循环调用`drawEye`函数，实现动画效果。 4. 启动动画：调用`drawEye`函数开始绘制动画。额外注意的逻辑点 1. 角度计算：在计算勾玉的位置时，使用三角函数`Math.cos`和`Math.sin`，要确保角度的单位是弧度。 2. 动画性能：使用`requestAnimationFrame`可以优化动画性能，但如果动画过于复杂，可能会影响性能。 3. 画布大小：画布的大小会影响动画的显示效果，要根据实际需求调整画布的宽度和高度。 ######[AI写代码神器 | 883点数解答 | 2025-06-25 22:50:24]

服务商

更多选项

快捷项

自定义