九大行星

您的浏览器版本过低,不支持canvas标签

var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");

function drawTrack(){for(var i=0;i<8;i++){

cxt.beginPath();

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

cxt.closePath();

cxt.strokeStyle="#fff";

cxt.stroke();

}

}

drawTrack();

function Star(x,y,r,cycle,bColor,eColor){this.x=x;this.y=y;this.r=r;this.cycle=cycle;this.time=0;this.bColor=bColor;this.eColor=eColor;this.draw=function(){

cxt.save();

cxt.translate(500,500);

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

cxt.beginPath();

cxt.arc(this.x,this.y,this.r,0,360,false);

cxt.closePath();var color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);

color.addColorStop(0,this.bColor);

color.addColorStop(1,this.eColor);

cxt.fillStyle=color;

cxt.fill();

cxt.restore();this.time+=1;

}

}

function Sun(){

Star.call(this,0,0,20,0,"#FFFF00","#FF9900");

}

function Mercury(){

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

}

function Venus(){

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

}

function Earth(){

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

}

function Mars(){

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

}

function Jupiter(){

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

}

function Saturn(){

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

}

function Uranus(){

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

}

function Neptune(){

Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");

}var sun=newSun();var mercury=newMercury();var venus=newVenus();var earth=newEarth();var mars=newMars();var jupiter=newJupiter();var saturn=newSaturn();var uranus=newUranus();var neptune=newNeptune();

function move(){

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

drawTrack();

sun.draw();

mercury.draw();

venus.draw();

earth.draw();

mars.draw();

jupiter.draw();

saturn.draw();

uranus.draw();

neptune.draw();

}

setInterval(move,10);

HTML5绘制八大行星加入字体,html5中用canvas画八大行星围绕太阳转相关推荐

  1. HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变

    如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法.下面我们就来一起看看具体的内容. createLinearGradient() createL ...

  2. java绘制聊天气泡代码_封装一个canvas画对话气泡的函数

    quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点.开始点由moveTo,或者前面一次的结束点作为下次调用的开始点 ...

  3. html画圆圈原理,【已解决】HTML中用Canvas画圆圈

    折腾: [未解决]vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图 期间,再去canvas中圆圈 如图: 希望画出大大小小的各种圆圈 包括圆圈里面还带东西的.c ...

  4. 新H5中用canvas画一个数字钟表

    此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...

  5. vue中用canvas画移动端电量显示 实现充电动画

    写一个电量组件 battery.vue <template><div><canvas ref="mycanvas" :width="cWid ...

  6. 在小程序中用canvas画一个仪表盘

    本意是打算写一个类似f2的半圆进度条,但是感觉小程序中引入太难调了,所以就自己用canvas随便画了一个实现了类似的效果. 最终效果图 wxml <view class="top-bo ...

  7. html表格框线怎么弄实心的,HTML5绘制实心的文本

    HTML5绘制实心的文本 1.设计源码 HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById(&qu ...

  8. html 怎么写出实心园,HTML5绘制实心的文本

    HTML5绘制实心的文本 1.设计源码 HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById(&qu ...

  9. 用HTML5绘制的一个星空特效图

    <!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...

  10. 由HTML5绘制地图说开去

    HTML5现在已经成为移动开发的另一个焦点,关于native app和web app以及杂交app的讨论也已经不少.原来光芒四射的Flash,Adobe公司宣布放弃移动版的开发,而转向更大力度的支持H ...

最新文章

  1. java使用jeids实现redis2.6的String操作(1)
  2. SAP UI5 dialog style max-height
  3. spring 加载java类_在Spring中基于Java类进行配置的完整步骤
  4. 续——《RedHat/Fedora等非ubuntu的Linux系统星空极速netkeeper拨号上网 》
  5. ai驱动数据安全治理_人工智能驱动的Microsoft工具简介
  6. 《微信公众平台入门到精通》,青龙老贼,详情版本
  7. TCP/IP网络编程
  8. 7-11 求链式线性表的倒数第K项 (20 分)
  9. 汉字为什么能流传至今_为什么中国的文字流传至今?
  10. 【Altera SoC体验之旅】+ 正式开启OpenCL模式
  11. 世界上再也找不到第二位程序员大叔能写出这样纯美的数学小说了
  12. cherry G80-3000茶轴空格左边失灵,经常无法触发按钮,安装空格卫星轴零件
  13. IBM深陷云计算业务欺诈丑闻,遭股东集体诉讼
  14. noob_Noob的Three.js指南
  15. 怎么隐藏自己电脑上的IP地址
  16. 盘点苹果电脑上那些不错的cpu优化工具
  17. Java虚拟机(JVM源码):编译OpenJDK源码
  18. 使用video.js 播放youtube视频——踩坑记1
  19. ipmitool使用手册
  20. IP网络技术实验(一)直通网线和交叉网线的制作

热门文章

  1. 固态硬盘装win7系统怎么安装教程
  2. 通过bib文件引入参考文献
  3. bib文件引用参考文献方法--心得
  4. 计算机播放音乐无声音,电脑放歌就突然没声音该怎么办
  5. 计算机id和密码怎么查,忘记Apple ID账号和密码怎么办?
  6. 南澳大学计算机科学专业学费,2020年南澳大学学费(本科及研究生)及学费支付方式解析!...
  7. java木马源码_用Java编写木马程序【附源代码下载】
  8. 按键精灵定义全局变量_按键精灵全局环境变量
  9. 【Java】Maven使用笔记
  10. Affinity Designer笔记:常用快捷键