鼠标旋转星球代码html
时间: 2023-08-10 14:04:11 浏览: 48
以下是一个简单的鼠标旋转星球的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>鼠标旋转星球</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var centerX = width / 2;
var centerY = height / 2;
var radius = 200;
var angleX = 0;
var angleY = 0;
var speed = 0.01;
function render() {
ctx.clearRect(0, 0, width, height);
angleX += speed;
angleY += speed;
var x = centerX + Math.sin(angleX) * radius;
var y = centerY + Math.sin(angleY) * radius;
ctx.beginPath();
ctx.fillStyle = "#ffffff";
ctx.arc(x, y, 50, 0, Math.PI * 2, false);
ctx.fill();
requestAnimationFrame(render);
}
render();
window.addEventListener('mousemove', function(event) {
angleX = (event.clientX - centerX) * 0.0001;
angleY = (event.clientY - centerY) * 0.0001;
});
</script>
</body>
</html>
```
这段代码使用了HTML5的canvas元素来绘制一个白色的圆,然后通过监听鼠标移动事件来改变圆的位置,从而实现了鼠标旋转星球的效果。你可以将代码复制到一个HTML文件中并在浏览器中打开来查看效果。