首页web太极图旋转代码

web太极图旋转代码

时间: 2024-11-24 11:43:06 浏览: 4

Web太极图旋转通常是指使用HTML5 canvas或者JavaScript库如Three.js或D3.js来创建动态的太极图案，并通过CSS3动画或者JavaScript事件驱动使其旋转。这里是一个基本的HTML和JavaScript示例，使用canvas元素来创建简单太极鱼形并使其旋转： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> #taiji { transform-origin: center; transition: transform 2s ease-in-out; } </style> </head> <body> <canvas id="taijiCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('taijiCanvas'); const ctx = canvas.getContext('2d'); // 创建太极鱼形 function drawTaiji() { ctx.beginPath(); ctx.arc(200, 200, 180, 0, Math.PI * 2); ctx.moveTo(200, 0); ctx.lineTo(160, 90); ctx.lineTo(80, 0); ctx.lineTo(160, -90); ctx.closePath(); ctx.fillStyle = '#ccc'; ctx.fill(); ctx.beginPath(); ctx.arc(200, 200, 100, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); } // 开始旋转 function startRotation() { let angle = 0; const rotateInterval = setInterval(() => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * (Math.PI / 180)); drawTaiji(); angle += 0.1; if (angle > 2 * Math.PI) clearInterval(rotateInterval); ctx.restore(); }, 100); } drawTaiji(); // 首次绘制 startRotation(); // 开始旋转 </script> </body> </html> ```

阅读全文