html实现光碟转动效果,html5实现太阳系转动效果

最新推荐文章于 2023-10-07 16:53:11 发布

转载最新推荐文章于 2023-10-07 16:53:11 发布 · 523 阅读

文章标签：

#html实现光碟转动效果

本文介绍了一种使用HTML5 canvas技术创建的交互式太阳系模型，通过JavaScript实现各个行星绕太阳的公转运动。通过实例代码展示了如何构造和绘制星体，以及定时更新位置以模拟真实天体运动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【实例简介】

【实例截图】

【核心代码】

canvas太阳系

您的浏览器不支持HTML5 canvas,无法查看canvas效果

//获取canvas绘图环境

var context = document.getElementById('canvas').getContext('2d');

var time = 0;

//星球轨道

function drawTrack(){

for(var i = 0; i < 8; i ){

//开始路径

context.beginPath();

context.arc(500,500,(i 1)*50,0,360,false);

//关闭路径

context.closePath();

context.strokeStyle = '#fff';

context.stroke();

}

//执行以下此函数，画出各星球的轨道

drawTrack();

//星球星球对象的构造方法实例化后能画出所有的星球

function Star(x,y,radius,sColor,eColor,cycle){

//星球需要的哪些属性

//星球的坐标点

this.x = x;

this.y = y;

//星球的半径

this.radius = radius;

//星球的颜色

this.sColor = sColor;

this.eColor = eColor;

//公转周期

this.cycle = cycle;

//绘画出星球

this.draw = function(){ //异次元空间进行绘画

context.save();

//重设0,0坐标点

context.translate(500,500);

//设置旋转角度

context.rotate(time*360/this.cycle*Math.PI/180);

context.beginPath();

context.arc(this.x,this.y,this.radius,0,360,false);

context.closePath();

//星球的填充色(径向渐变开始色和结束色)

this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);

this.color.addColorStop(0,this.sColor);

this.color.addColorStop(1,this.eColor);

context.fillStyle = this.color;

context.fill();

context.restore();

time =1;

}

//各星球构造方法从star中继承

function Sun(){

Star.call(this,0,0,20,'#f00','#f90',0);

}

function Mercury(){

Star.call(this,0,-50,10,'#A69697','#5C3E40',87.70);

}

function Venus(){

Star.call(this,0,-100,10,'#C4BBAC','#1F1315',224.701);

}

function Earth(){

Star.call(this,0,-150,10,'#78B1E8','#050C12',365.2422);

}

function Mars(){

Star.call(this,0,-200,10,'#CEC9B6','#76422D',686.98);

}

function Jupiter(){

Star.call(this,0,-250,10,'#C0A48E','#322222',4332.589);

}

function Saturn(){

Star.call(this,0,-300,10,'#F7F9E3','#5C4533',10759.5);

}

function Uranus(){

Star.call(this,0,-350,10,'#A7E1E5','#19243A',30799.095);

}

function Neptune(){

Star.call(this,0,-400,10,'#0661B2','#1E3B73',164.8*365);

}

//各星球对象的实例化

var sun = new Sun();

var water = new Mercury();

var gold = new Venus();

var diqiu = new Earth();

var fire = new Mars();

var wood = new Jupiter();

var soil = new Saturn();

var sky = new Uranus();

var sea = new Neptune();

function move(){

//清除画布

context.clearRect(0,0,1000,1000);

//重新绘制一遍轨道

drawTrack();

sun.draw();

water.draw();

gold.draw();

diqiu.draw();

fire.draw();

wood.draw();

soil.draw();

sky.draw();

sea.draw();

}

//星球围绕太阳运动起来

setInterval(move,100);