html不用画布太阳系示意图,html5-canvas-太阳系2
主要应用技术:
1、canvas画线
2、canvas画圆
3、笔触修改和填充笔修改
4、制作渐变色
5、角度旋转
6、JS部分对象和方法(setInterval)
效果图;
您的浏览器不支持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,(i + 1) * 50,360);
cxt.closePath();
cxt.strokeStyle = "#fff";
cxt.stroke();
}
}
drawTrack(); //调用画轨道方法
//星球类
function Star(x,y,radius,cycle,sColor,eColor){
//画出星球需要哪些属性
//星球的坐标点
this.x = x;
this.y = y;
//星球的半径
this.radius = radius;
//公转周期
this.cycle = cycle;
//星球的颜色(开始色,结束色)
this.sColor = sColor;
this.eColor = eColor;
//新建一个渐变颜色空对象
this.color = null;
//计时器
this.time = 0;
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.radius,360,false);
cxt.closePath();
//设置星球的填充颜色
//新建渐变对象
this.color = cxt.createRadialGradient(this.x,this.x,this.radius);
//设置渐变效果
this.color.addColorStop(0,this.sColor); //渐变开始点和颜色
this.color.addColorStop(1,this.eColor); //渐变结束点和颜色
cxt.fillStyle = this.color; //将渐变对象赋值给填充画笔
cxt.fill(); //填充星球
cxt.restore(); //恢复之前保存的画布内容
//执行完毕之后时间增加
this.time++;
}
}
//太阳
function Sun(){
//太阳继承星球
Star.call(this,20,"#f00","#f90");
}
//水星
function Mercury(){
//水星继承星球
Star.call(this,-50,10,87.70,"#a69697","#5c3e40");
}
//金星
function Venus(){
//金星继承星球
Star.call(this,-100,224.701,"#c4bbac","#1f1315");
}
//地球
function Earth(){
//地球继承星球
Star.call(this,-150,365.2422,"#78e1e8","#050c12");
}
//火星
function Mars(){
//火星继承星球
Star.call(this,-200,686.98,"#cec9b6","#76422d");
}
//木星
function Jupiter(){
//木星继承星球
Star.call(this,-250,4332.589,"#c0a48e","#322222");
}
//土星
function Saturn(){
//土星继承星球
Star.call(this,-300,10759.5,"#f7f9e3","#5c4533");
}
//天王星
function Uranus(){
//天王星继承星球
Star.call(this,-350,30799.095,"#a7e1e5","#19243a");
}
//海王星
function Neptune(){
//海王星继承星球
Star.call(this,-400,60152,"#0661b2","#1e3b73");
}
var sun = new Sun();
var mercury = new Mercury();
var venus = new Venus();
var earth = new Earth();
var mars = new Mars();
var jupiter = new Jupiter();
var saturn = new Saturn();
var uranus = new Uranus();
var neptune = new Neptune();
function move() {
//清除画布
cxt.clearRect(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);
html不用画布太阳系示意图,html5-canvas-太阳系2相关推荐
- html5 移动画布,html5画布移动元素(html5 canvas move element)
html5画布移动元素(html5 canvas move element) 我正在用HTML5和JS开发赛车游戏. 我正在尝试使用箭头键移动汽车. 但它不起作用. 如何移动画布中的元素,并且在移动元 ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例
演示html5 canvas鼠标事件,获取canvas对象上的鼠标坐标,演示键盘事件通过键盘控制canvas上对象移动. canvas对象支持所有的javascript的鼠标事件,包括鼠标点击(mou ...
- 用html画布做扇形,html5 canvas元素扇形的绘制
canvas{background: #b8edc9;} Canvas 您的浏览器不支持html5dcanvas元素 var canvas=document.getElementById('mycan ...
- java 九大行星运行_html5 canvas太阳系九大行星运行动态图代码
特效描述:html5 canvas 太阳系 九大行星运行 动态图代码.html5 canvas这个动画加上了每个行星的名称,只要鼠标移入目标行星就会显示. 代码结构 1. HTML代码 你浏览器不支持 ...
- html5清除所有,html5 canvas永久清除
我一直在创建一个画布,你可以生成文本并显示在我的画布上.html5 canvas永久清除 POST按钮和清除按钮在第一个工作正常! 我遇到的下一个问题/错误是,当我输入一个新单词并点击POST, 之前 ...
- HTML5 canvas绘制太阳系各行星(包括月球的公转)
HTML5 canvas绘制太阳系 看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上 ...
- MDN上的Canvas太阳系例子我终于彻底看懂了
来自MDN上的Canvas动画例子–太阳系动画 本文将从例子源码入手,带你从我个人角度理解Canvas太阳系动画的实现,并对一些api做出介绍解释,首先说明我也是刚学习的Canvas,有出错的地方还请 ...
- html画布显示PPT,【Web前端问题】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档?...
目前想实现类似百度文库那样的在线文档预览,但是他们使用的一般都是Flash,而HTML5 canvas可以在大多数情况下代替Flash,那么有没有办法让canvas显示/预览Office文档? 如果不 ...
- html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
最新文章
- 2018年中国城市用电量30强
- Java线程详解(4)-线程状态的转换
- 【C++深度剖析教程17】逻辑操作符的陷阱
- python入门——P41魔法方法:构造和析构
- 使用阿富汗和巴基斯坦地区的SRTM数据生成山体阴影和彩色地形图
- 能被2、3、4、5、6、7、8、9、10、11、13、25整除的整数的特征是?有趣的21详解
- 【PTAL2-001】紧急救援(Dijkstra+最短路径的条数+最短路径中点权之和的最大值)
- 2014年上半年系统集成项目管理工程师真题解析(上午+下午)
- 本科论文查重率多少?
- Swagger3 版本动态分组
- 场景文字识别论文阅读
- AI之NLP:自然语言处理技术简介(是什么/学什么/怎么用)、常用算法、经典案例之详细攻略(建议收藏)daiding
- 室内设计——海市蜃楼售楼部室内设计(包含预览图jpg和.psd文件)
- N1 小钢炮docker安装迅雷方法
- 【SQL语法基础】了解SQL:一门半衰期很长的语言
- 基于Python分析气象数据教程-1
- IText7添加图片覆盖文字
- 10.0高等数学五-上半部分-习题练习
- php(常见知识点二)
- 智能合约语言 Solidity 教程系列9 - 错误处理 1