实现宝石旋转动画html网页
时间: 2024-06-14 19:03:29 浏览: 11
以下是一个基于HTML5 Canvas的宝石旋转动画的示例代码,你可以将其复制到HTML文件中并在浏览器中打开以查看效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>宝石旋转动画</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
function drawDiamond() {
ctx.beginPath();
ctx.moveTo(centerX, centerY - radius);
ctx.lineTo(centerX + radius, centerY);
ctx.lineTo(centerX, centerY + radius);
ctx.lineTo(centerX - radius, centerY);
ctx.closePath();
ctx.stroke();
}
function rotateDiamond(angle) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
drawDiamond();
ctx.restore();
}
var angle = 0;
setInterval(function() {
angle += Math.PI / 180;
rotateDiamond(angle);
}, 10);
</script>
</body>
</html>
```