html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系

本文主要是描述了使用html5画出地球月球和太阳之间的环绕关系，其实他们比较简单，主要是通过旋转来控制各个之间的环绕关系！~

输入代码，里面有注释：

—————————————————————————————————————————

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

Html5实现的超强鼠标跟随效果

var sun = new Image();

var moon = new Image();

var earth = new Image();

function draw(){

var ctx = document.getElementById(‘myCanvas’).getContext(’2d’);

ctx.globalCompositeOperation = ‘destination-over’;//先绘制的图片覆盖后面的

ctx.clearRect(0,0,300,300); // 清除canvas

ctx.fillStyle = ‘rgba(0,0,0,0.4)’;//填充的颜色

ctx.strokeStyle = ‘rgba(0,153,255,0.4)’; //绘制的颜色

ctx.save();

ctx.translate(150,150); // 地球

var time = new Date();

ctx.rotate(((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds());

ctx.translate(105,0);

ctx.fillRect(0,-12,50,24); // 阴影

ctx.drawImage(earth,-12,-12);//画出地球

ctx.save();

ctx.rotate(((2*Math.PI)/6)*time.getSeconds()+((2*Math.PI)/6000)*time.getMilliseconds());

ctx.translate(0,28.5);

ctx.drawImage(moon,-3.5,-3.5);

ctx.restore();

ctx.beginPath();

ctx.arc(150,150,105,0,Math.PI*2,false); // 地球轨道，绘制一个圆

ctx.stroke();//绘制

ctx.drawImage(sun,0,0,300,300);

}

function init(){

sun.src = ‘sun.png’;

moon.src = ‘moon.png’;

earth.src = ‘earth.png’;

setInterval(draw,100);

}

window.addEventListener(“load”,init,true);

—————————————————————————————————————————–

效果截图：

html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系相关推荐

用python画出漂亮的地日模型（围绕太阳转地球）
用python画出地球绕太阳的运动图 EARTH_SUN_PROGRAMME: 代码如下所示: import matplotlib. pyplot as plt import numpy as np ...
画出微型计算机结构图,中级工792、画出计算机环形网络模式图.doc
中级工792.画出计算机环形网络模式图中级工792.画出计算机环形网络模式图. 画出计算机总线网络模式图. 画出计算机星形网络模式图. 画出单工通信方式图. 画出半双工通信方式图. 画出全双工通信方 ...
用R画出染色体修饰图谱--超详细版本
用R画出染色体修饰图谱-染色体之间的物理长度之比不变准备数据 1.染色体长度信息文件全基因组文件建立index时可获取 2.将染色体以1Mb 滑动划分区间 bedtools makewindows ...
java程序画龙猫_几步教你画出萌萌的龙猫
原标题:几步教你画出萌萌的龙猫小提示:一键点击关注"艺考问问",每天都有不一样的精彩和你分享!最新的艺考资讯,最爆笑的艺考小故事,最贴心的艺考早知道,最详细的艺考动态解析,最惊艳 ...
javascript-动画animation自己学习做太阳地球和月球运转动画；
首先声明一点:自己学习的程序来源于: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animat ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
利用html5画出五角星画出星空
利用html5画出五角星 (在慕课网学习<canvas>标签后代码总结) 五角星的格定点坐标该如何定位?原理图如下: 源代码: <!DOCTYPE HTML> <html ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22 来源:亿速云阅读:83 作者:小新这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...

html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系

html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系相关推荐

最新文章

热门文章