介绍 & lt; canvas id=癱anvas",宽度=?000“,身高=?000“,风格=癰ackground:, # 000;“祝辞& lt;/canvas> ,var 帆布=. getelementbyid (“canvas");
,,,var cxt=canvas.getContext (“2 d");
,
,,,function DrawTrack () {
,,,,,,,,(var 我=0;i<8;我+ +){
,,,,,,,,,,,cxt.beginPath ();
,,,,,,,,,,,cxt.arc (500500 (i + 1) * 50, 0360年,假);
,,,,,,,,,,,cxt.closePath ();
,,,,,,,,,,,cxt.strokeStyle=? fff";
,,,,,,,,,,,cxt.stroke ();
,,,,,,,}
,,,}
,,,function DrawStart (x, y,半径、周期、sColor eColor) {
,,,,,,,//画出星球需要哪些属性
,,,,,,,//星球的坐标点
,,,,,,,this.x=x;
,,,,,,,this.y=y;
,,,,,,,//星球的半径
,,,,,,,this.radius=半径;
,,,,,,,//星球的颜色(开始色,结束色)
,,,,,,,this.sColor=sColor;
,,,,,,,this.eColor=eColor;
,,,,,,,//创建一个渐变色空对象
,,,,,,,this.color=零;
,,,,,,,this.time=0;
,,,,,,,//公共周期
,,,,,,,this.cycle=周期;
,,,,,,,this.draw=function () {
,,,,,,,,,,,cxt.save ();
,,,,,,,,,,,cxt.translate (500500);
,,,,,,,,,,,//设置旋转角度
,,,,,,,,,,,cxt.rotate (this.time * 360/this.cycle * Math.PI/180);
,,,,,,,,,,,cxt.beginPath ();
,,,,,,,,,,,cxt.arc (this.x, this.y this.radius 0360,假);
,,,,,,,,,,,cxt.closePath ();
,,,,,,,,,,,this.color=cxt.createRadialGradient (this.x this.y 0, this.x this.y, this.radius);
,,,,,,,,,,,this.color.addColorStop (0, this.sColor);
,,,,,,,,,,,this.color.addColorStop (1, this.eColor);
,,,,,,,,,,,cxt.fillStyle=this.color;
,,,,,,,,,,,cxt.fill ();
,,,,,,,,,,,cxt.restore ();
,,,,,,,,,,,this.time +=1;
,,,,,,,}
,,,}& lt;/p>, & lt; p>,,,,, function 太阳(){//太阳1
,,,,,,,DrawStart.call(0, 0, 0, 20日,“# f00",“# f90");
,,,}
,,,function 汞(){//水星2
,,,,,,,DrawStart.call(87.70 0,这-50年,10日,“# A69697",“# 5 c3e40");
,,,}
,,,function 金星(){//金3星
,,,,,,,DrawStart.call (0, -100, 10224 .71,“# c4bbac",“# 1 f1315");
,,,}
,,,function 地球(){//地球4
,,,,,,,DrawStart.call (0, -150, 10365 .224,“# 78 b1e8",“# 050 c12");
,,,}
,,,function 火星(){//火5星
,,,,,,,DrawStart.call(0, -200, 10686 .98点,“# cec9b6",“# 76422 d");
,,,}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要为大家展示了“html5如何使用帆布绘制太阳系效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何使用帆布绘制太阳系效果”这篇文章吧。
星球变量名公转周期光色暗色水星Mercury87.70 # a69697 # 5 c3e40金星Venus224.701.70 # c4bbac # 1 f1315地球Earth365.2422 # 78 b1e8 # 050 c12火星Mars686.98 # cec9b6 # 76422 d木星Jupiter4332.589 # c0a48e # 322土星Saturn10759.95 # f7f9e3 # 5 c4553天王星Uranus30799.095 # a7e115 # 19243一个海王星Neptune60152.95 # 0661 b2 # 1 e3b73代码如下:
