HTML5 之Canvas绘制太阳系
<!DOCTYPE html>
<html>
<head>
<title>HTML5_Canvas_SolarSystem</title>
<!--简单 样式模版-->
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: YaHei Consolas Hybrid,宋体;
font-size: 14px;
list-style: none;
}
.wrapper
{
margin: 50px auto;
width: 1000px;
padding: 10px;
border: solid 1px gray;
background-color: #eee;
overflow:auto;
}/*H1浅蓝阴刻字*/
body
{
background-color: gray;
}
h1
{
text-align: center;
display: block;
background-color: #C4DEF7;
color: #344251;
font: normal 30px "微软雅黑";
text-shadow: 1px 1px 0px #DEF3FF;
padding: 5px 0px;
margin:10px;
box-shadow: 0px 2px 6px #000;
border-radius:10px;
} #canvas { background-color:Black;}
</style>
</head>
<body>
<h1>
HTML5 之 Canvas Demo SolarSystem
</h1>
<div class="wrapper">
<canvas width="1000" height="1000" id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); //初始化画面，并保存当前环境
var initMap= function(){
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
} //画轨道
var drawTrack = function () {
for (var i = 0; i <= 8; i++) {
ctx.beginPath();
ctx.arc(0, 0, 60 * i, 0, 360, false);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.stroke();
}
} //画星球的函数（圆心坐标，开始渐变色，结束渐变色，公转周期,开始天数）
var drawPlanets = function (x, y, radius, sColor, eColor, cycle) {
this.x = x;
this.y = y;
this.radius = radius;
this.sColor = sColor;
this.eColor = eColor;
this.cycle = cycle;
this.days = 0; this.Draw = function () {
var angle = this.days * (360 / cycle);
ctx.save();
ctx.rotate(angle * Math.PI / 180);
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 360, false);
ctx.closePath();
var planetStyle = ctx.createRadialGradient(this.x - 2, this.y, 0, this.x, this.y, this.radius);
planetStyle.addColorStop(0, this.sColor);
planetStyle.addColorStop(1, this.eColor);
ctx.fillStyle = planetStyle;
ctx.fill();
ctx.restore();
this.days++;
}
} //画太阳的类，继承drawPlanets
function Sun() {
drawPlanets.call(this, 0, 0, 20, "#F00", "#f90", 0);
}
//创建一个水星的对象构造方法
function Mercury() {
drawPlanets.call(this, 60, 0, 12, "#A69697", "#5C3E40", 87.70);
}
//创建一个金星的对象构造方法
function Venus() {
drawPlanets.call(this, 120, 0, 14, "#C4BBAC", "#1F1315", 224.701);
}
//创建一个地球的对象构造方法
function Earth() {
drawPlanets.call(this, 180, 0, 15, "#0FAFFC", "#005281", 365);
}
//创建一个火星的对象构造方法
function Mars() {
drawPlanets.call(this, 240, 0, 15, "#CEC9B6", "#76422D", 686.98);
}
//创建一个木星的对象构造方法
function Jupiter() {
drawPlanets.call(this,300, 0, 15, "#C0A48E", "#322222", 4332.589);
}
//创建一个土星的对象构造方法
function Saturn() {
drawPlanets.call(this,360, 0, 15, "#F7F9E3", "#5C4533", 10759.5);
}
//创建一个天王星的对象构造方法
function Uranus() {
drawPlanets.call(this,420, 0, 15, "#A7E1E5", "#19243A", 30799.095);
}
//创建一个海王星的对象构造方法
function Neptune() {
drawPlanets.call(this,480, 0, 15, "#0661B2", "#1E3B73", 60152);
} //实例化出星球的对象
var sun = new Sun();
var earth = new Earth();
var mercury = new Mercury();
var venus = new Venus();
var mars = new Mars();
var jupiter = new Jupiter();
var saturn = new Saturn();
var uranus = new Uranus();
var neptune = new Neptune(); var move = function () {
//初始化画布，并保存环境
initMap();
//绘制轨道
drawTrack();
//调用绘制星球的函数
sun.Draw();
earth.Draw();
venus.Draw();
mars.Draw();
jupiter.Draw();
saturn.Draw();
uranus.Draw();
mercury.Draw();
neptune.Draw();
//返回到开始保存的环境
ctx.restore(); }
move();
//启动定时器，开始绘制
window.setInterval(move, 80); </script>
</div>
</body>
</html>
效果图：
HTML5 之Canvas绘制太阳系的更多相关文章
- canvas绘制太阳系
原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 ...
- html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5 在canvas绘制一个矩形
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
- HTML5用canvas绘制五星红旗
在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...
- html5的canvas绘制线条，moveTo和lineTo详解
今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
随机推荐
- [iOS Hybrid实践：UIWebView中Html中用JS调用OC方法，OC执行JS代码]
原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...
- [iOS UI设计笔记整理汇总]
8.UIsearchbar放到Navigationbar 上(意思是建个View作为titleview) //此处调用的是第三方封装的SearchBar,也可以自定义. self.searchBarW ...
- js事件委托的方式绑定详解
js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能. ...
- ofo走出校园观察：市场定位导致产品错位？
Ofo和摩拜单车虽然同样都是做单车共享,但实际上两者在最初的市场定位是有明显的差异的,因此提供的产品方案也存在巨大的差异. 市场定位不同,导致产品方案的巨大差异 摩拜单车一开始就定位于开放市场,充分的 ...
- 深入分析ConcurrentHashMap
术语定义 哈希算法 hash algorithm 是一种将任意内容的输入转换成相同长度输出的加密方式,其输出被称为哈希值. 哈希表 hash table 根据设定的哈希函数H(key)和处理冲突方 ...
- K米APP案例分析
关于 K米 -- 的案例分析 产品 K米的APP (全国KTV点歌,手机直播,互动,交友,预订)的Android客户端 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测试 • 下载并使用, ...
- PMD使用提醒
1.注册登录后进入主界面,向右滑动出现侧滑栏 2.点击蓄水球进行每日目标设定 3.设置计时失败发送朋友圈内容 ~~~~~开始体验吧!!!
- HTML5学习总结-08 WebSocket 服务器推送
一 WebSocket 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展 ...
- Codeforces Round #345 D. Image Preview(二分)
题目链接 题意:看一个图片需要1单位时间,如果是 w 需要翻转 b 时间,切换到相邻位置(往左或者往右)需要 a 时间,求T时间最多能看几张图片 从第一个开始向右走看若干个图片然后往如果往左走就不会再 ...
- IOS中在自定义控件(非视图控制器)的视图跳转中 代理方法与代码块的比较
//代码块与代替代理的设计方法 我就以在自定义视图中(非视图控制器,不能实现视图控制功能),通过代理和代码块两种方法分别实现视图的跳转,进行对比 首先自定义了一个视图,上面有一个已经注册了得BUtto ...