HTML5---Canvas-模拟地球-星球运行轨道
2015-08-20 11:10
661 查看
<!doctype html> <html> <head></head> <body> <canvas id="canvas" width="1000" height ="1000" style="background:#000"> 您的浏览器不支持canvas标签 </canvas> <script> var canvas=document.getElementById('canvas'); var cxt=canvas.getContext('2d'); var time=0; //声明一个时间参数(1:1天) function draw(){ cxt.clearRect(0,0,1000,1000); //清除画布(清除之前的内容 重新画) //画轨道,设置笔触颜色 cxt.strokeStyle="#8D1C21"; cxt.beginPath(); cxt.arc(500,500,100,0,Math.PI*360,false); cxt.closePath(); cxt.stroke(); //画太阳 cxt.beginPath(); cxt.arc(500,500,20,0,360,false); cxt.closePath(); var sunColor=cxt.createRadialGradient(500,500,0,500,500,20);//(内圆心x,内圆形y,内半径,外圆心x,外圆心y,外半径); sunColor.addColorStop(0,"#f00"); sunColor.addColorStop(1,"#f90"); cxt.fillStyle=sunColor; //设置填充颜色(渐变色) cxt.fill(); //画地球 cxt.save(); cxt.translate(500,500); //设置一下异次元空间的0,0点 //cxt.rotate(90*Math.PI/190); cxt.rotate(time*360/365*Math.PI/190);//地球公转一周需要365天,time=1天 一天转360/365度 //画出地球 cxt.beginPath(); cxt.arc(0,-100,10,0,360,false); cxt.closePath(); var earthColor=cxt.createRadialGradient(0,-100,0,0,-100,10); earthColor.addColorStop(0,'#78B1E8'); earthColor.addColorStop(1,'#050C12'); cxt.fillStyle=earthColor; cxt.fill(); cxt.restore(); time+=1; //每画一次图像,时间参数加1 } //使地球动起来 setInterval(draw,10); </script> </body> </html>
效果:
相关文章推荐
- HTML5---canvas 指针时钟-clock
- Webkit中HTML5 Video的实现分析-HTMLMediaElement & MediaPlayer
- 移动设备 h5屏幕适配
- HTML5---Canvas-画线,空心图,矩形,文字,三角形,旋转图片
- 后台模版第二季,真正好用漂亮,HTML5+CSS3搭建,下载即用,无需二次编写。
- HTML5----video ,audio常规操作
- HTML5标签
- H5上传图片
- HTML5 学习记录——1
- HTML5 boilerplate 笔记(转)
- HTML5+ 打开关闭侧滑窗口
- Chrome/Chromium HTML5 video 视频播放硬件加速
- html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素
- 普元日记---HTML5底部遮罩层
- 《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总
- html5离线缓存--manifest
- HTML5 随手记(4)
- web socket and web worker 基础原理及使用
- HTML5 cavans的使用
- html5 history解析