宝石旋转发光html
时间: 2023-12-15 21:32:52 浏览: 91
以下是一个基于HTML5 Canvas的3D蓝宝石动画,宝石可以通过鼠标的拖拽来实现各个视角的观察,并且通过鼠标滚轮来缩放宝石的大小,同时蓝宝石的表面会不时地发出闪亮的光芒。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>3D Sapphire</title>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var fl = 300;
var points = [];
var numPoints = 200;
var centerZ = 1000;
var radius = 500;
var baseAngle = 0;
var rotationSpeed = 0.01;
var angle = 0;
for (var i = 0; i < numPoints; i++) {
var point = {
angle: 0.2 * i,
y: height / 2 + Math.random() * 100 - 50,
x: width / 2 + Math.random() * 100 - 50,
z: Math.random() * 400 - 200
};
points.push(point);
}
ctx.translate(width / 2, height / 2);
function render() {
baseAngle += rotationSpeed;
ctx.clearRect(-width / 2, -height / 2, width, height);
for (var i = 0; i < numPoints; i++) {
var point = points[i];
var perspective = fl / (fl + point.z + centerZ);
ctx.save();
ctx.scale(perspective, perspective);
ctx.translate(point.x, point.y);
point.angle += rotationSpeed;
point.x = Math.cos(point.angle + baseAngle) * radius;
point.z = centerZ + Math.sin(point.angle + baseAngle) * radius;
ctx.beginPath();
ctx.arc(0, 0, 20 * perspective, 0, Math.PI * 2, false);
ctx.fillStyle = 'rgba(255, 255, 255, ' + (1 - i / numPoints) + ')';
ctx.fill();
ctx.restore();
}
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
```