UDN-企业互联网技术人气社区

板块导航

浏览  : 1406
回复  : 2

[HTML5] Canvas 绘制八大行星

[复制链接]
泡泡兔的头像 楼主
发表于 2017-2-3 10:58:28 | 显示全部楼层 |阅读模式
  1. <canvaswidth="1000"height="1000"id="canvas"style="background:#000;">
  2.         您的浏览器不支持,请升级浏览器!
  3. </canvas>
复制代码

  1. //设置2d绘图环境
  2. var ctx = document.getElementById("canvas").getContext("2d");

  3. //轨道
  4. functiondrawTrack(){
  5.   for(var i = 0;i < 8;i++){
  6.     ctx.beginPath();
  7.     ctx.arc(500,500,(i+1) * 50,0,360,false);
  8.     ctx.strokeStyle = "#fff";//设置笔触颜色
  9.     ctx.stroke();
  10.     ctx.closePath();
  11.   }
  12. }


  13. //星球

  14. functionStar(x,y,radius,cycle,sColor,eColor){
  15.   //画出星球需要的属性
  16.   //星球的坐标点 星球的半径 星球的颜色(开始颜色、结束颜色)
  17.   //公转周期
  18.   
  19.   //星球坐标点
  20.   this.x = x;
  21.   this.y = y;
  22.   this.radius = radius;
  23.   this.cycle = cycle;
  24.   this.eColor = eColor;
  25.   this.sColor = sColor;
  26.   
  27.   
  28.   this.color = null;//渐变颜色空对象
  29.   this.time = 0;//设置一个计时器
  30.   
  31.   this.draw = function(){
  32.     //save()可以这样理解 原来的画布内容不变 把save()和restore()之间的内容画好了 在塞进来
  33.     ctx.save();//保存之前的画布内容
  34.     ctx.translate(500,500);//重置0,0坐标点
  35.     ctx.rotate(this.time * (360/this.cycle) * Math.PI / 180);//设置旋转角度
  36.    
  37.     //画星球
  38.     ctx.beginPath();
  39.     ctx.arc(this.x,this.y,this.radius,0,360,false);
  40.     ctx.closePath();
  41.    
  42.     //设置星球的填充颜色
  43.    
  44.     this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
  45.     this.color.addColorStop(0,this.sColor);//渐变颜色开始点
  46.     this.color.addColorStop(0,this.eColor);//渐变颜色结束点
  47.     ctx.fillStyle = this.color;
  48.     ctx.fill();//执行填充命令
  49.    
  50.     //填充星球
  51.    
  52.    
  53.     ctx.restore();//恢复之前保存的画布内容
  54.     this.time +=1;
  55.   }
  56. }

  57. //创建一个太阳对象的构造函数
  58. functionSun(){
  59.   Star.call(this,0,0,20,0,"#F00","#f90");
  60. }
  61. //创建一个水星的对象构造方法
  62. functionMercury(){
  63.   Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
  64. }
  65. //创建一个金星的对象构造方法
  66. functionVenus(){
  67.   Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
  68. }
  69. //创建一个地球的对象构造方法
  70. functionEarth(){
  71.   Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");
  72. }
  73. //创建一个火星的对象构造方法
  74. functionMars(){
  75.   Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
  76. }
  77. //创建一个木星的对象构造方法
  78. functionJupiter(){
  79.   Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
  80. }
  81. //创建一个土星的对象构造方法
  82. functionSaturn(){
  83.   Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
  84. }
  85. //创建一个天王星的对象构造方法
  86. functionUranus(){
  87.   Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
  88. }
  89. //创建一个海王星的对象构造方法
  90. functionNeptune(){
  91.   Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
  92. }

  93. //创建太阳对象实例
  94. var sun=new Sun();

  95. //创建水星对象实例
  96. var water=new Mercury();

  97. //创建金星对象实例
  98. var gold=new Venus();

  99. //创建一个地球对象实例
  100. var diqiu=new Earth();

  101. //创建一个火星对象实例
  102. var fire=new Mars();

  103. //创建一个木星对象实例
  104. var wood=new Jupiter();

  105. //创建一个土星对象实例
  106. var soil=new Saturn();

  107. //创建一个天王星对象实例
  108. var god=new Uranus();

  109. //创建一个海王星对象实例
  110. var sea=new Neptune();


  111. functionmove(){
  112.    //清除画布
  113.    ctx.clearRect(0,0,1000,1000);
  114.    //画出轨道
  115.    drawTrack();
  116.    //画出每个星球
  117.    sun.draw();
  118.    water.draw();
  119.    gold.draw();
  120.    diqiu.draw();
  121.    fire.draw();
  122.    wood.draw();
  123.    soil.draw();
  124.    god.draw();
  125.    sea.draw();
  126. }

  127. //使让星球进行运动
  128. setInterval(move,10);
复制代码

相关帖子

发表于 2017-2-3 10:59:00 | 显示全部楼层
经常看到@泡泡兔发帖,辛苦了
使用道具 举报

回复

发表于 2017-2-4 05:38:57 来自手机 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部