HTML5绘制八大行星加入字体,html5中用canvas画八大行星围绕太阳转
您的浏览器版本过低,不支持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画八大行星围绕太阳转相关推荐
- HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变
如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法.下面我们就来一起看看具体的内容. createLinearGradient() createL ...
- java绘制聊天气泡代码_封装一个canvas画对话气泡的函数
quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点.开始点由moveTo,或者前面一次的结束点作为下次调用的开始点 ...
- html画圆圈原理,【已解决】HTML中用Canvas画圆圈
折腾: [未解决]vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图 期间,再去canvas中圆圈 如图: 希望画出大大小小的各种圆圈 包括圆圈里面还带东西的.c ...
- 新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
- vue中用canvas画移动端电量显示 实现充电动画
写一个电量组件 battery.vue <template><div><canvas ref="mycanvas" :width="cWid ...
- 在小程序中用canvas画一个仪表盘
本意是打算写一个类似f2的半圆进度条,但是感觉小程序中引入太难调了,所以就自己用canvas随便画了一个实现了类似的效果. 最终效果图 wxml <view class="top-bo ...
- html表格框线怎么弄实心的,HTML5绘制实心的文本
HTML5绘制实心的文本 1.设计源码 HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById(&qu ...
- html 怎么写出实心园,HTML5绘制实心的文本
HTML5绘制实心的文本 1.设计源码 HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById(&qu ...
- 用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- 由HTML5绘制地图说开去
HTML5现在已经成为移动开发的另一个焦点,关于native app和web app以及杂交app的讨论也已经不少.原来光芒四射的Flash,Adobe公司宣布放弃移动版的开发,而转向更大力度的支持H ...
最新文章
- java使用jeids实现redis2.6的String操作(1)
- SAP UI5 dialog style max-height
- spring 加载java类_在Spring中基于Java类进行配置的完整步骤
- 续——《RedHat/Fedora等非ubuntu的Linux系统星空极速netkeeper拨号上网 》
- ai驱动数据安全治理_人工智能驱动的Microsoft工具简介
- 《微信公众平台入门到精通》,青龙老贼,详情版本
- TCP/IP网络编程
- 7-11 求链式线性表的倒数第K项 (20 分)
- 汉字为什么能流传至今_为什么中国的文字流传至今?
- 【Altera SoC体验之旅】+ 正式开启OpenCL模式
- 世界上再也找不到第二位程序员大叔能写出这样纯美的数学小说了
- cherry G80-3000茶轴空格左边失灵,经常无法触发按钮,安装空格卫星轴零件
- IBM深陷云计算业务欺诈丑闻,遭股东集体诉讼
- noob_Noob的Three.js指南
- 怎么隐藏自己电脑上的IP地址
- 盘点苹果电脑上那些不错的cpu优化工具
- Java虚拟机(JVM源码):编译OpenJDK源码
- 使用video.js 播放youtube视频——踩坑记1
- ipmitool使用手册
- IP网络技术实验(一)直通网线和交叉网线的制作
热门文章
- 固态硬盘装win7系统怎么安装教程
- 通过bib文件引入参考文献
- bib文件引用参考文献方法--心得
- 计算机播放音乐无声音,电脑放歌就突然没声音该怎么办
- 计算机id和密码怎么查,忘记Apple ID账号和密码怎么办?
- 南澳大学计算机科学专业学费,2020年南澳大学学费(本科及研究生)及学费支付方式解析!...
- java木马源码_用Java编写木马程序【附源代码下载】
- 按键精灵定义全局变量_按键精灵全局环境变量
- 【Java】Maven使用笔记
- Affinity Designer笔记:常用快捷键