canvas动画---- 太阳、地球、月球
2024-10-18 23:31:15
<div>
<canvas id="canvas" width="500" height="500"></canvas>
</div>
function draw(){
var canvas = document.getElementById("canvas");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(10,10,580,580);
ctx.save(); //绘制太阳
ctx.translate(250,250);
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(0,0,50,0,2*Math.PI);
ctx.fill(); //绘制地球轨道
ctx.beginPath();
ctx.strokeStyle="yellow";
ctx.arc(0,0,120,0,2*Math.PI);
ctx.stroke(); let time = new Date();
//绘制地球
ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds());
ctx.translate(120,0);
ctx.beginPath();
ctx.fillStyle="blue";
ctx.arc(0,0,10,0,2*Math.PI);
ctx.fill(); //绘制月球轨道
ctx.beginPath();
ctx.strokeStyle="gray";
ctx.arc(0,0,30,0,2*Math.PI);
ctx.stroke(); //绘制月球
ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
ctx.translate(30,0);
ctx.beginPath();
ctx.fillStyle="lightblue";
ctx.arc(0,0,5,0,2*Math.PI);
ctx.fill(); ctx.restore();
requestAnimationFrame(draw);//告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画,该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。
}
draw();
截图:
最新文章
- 关于TCP中的MSS
- yum自动脚本
- LightOJ1360 Skyscraper(DP)
- Android 对Map按key和value分别排序
- 转:python类型转换、数值操作
- 给windows服务打包,并生成安装程序
- ffmpeg windows 雪花声解决方法
- java 搭建webservice服务+testclient測试
- Ehcache(2.9.x) - API Developer Guide, Cache Usage Patterns
- Saruman&#39;s Army (POJ 3069)
- 连接postgresql数据库
- 七、cocos2dx之粒子系统
- CSS垂直和水平居中
- 可能是迄今为止最好的GitHub代码浏览插件--赞
- Go资源
- 2ci
- crontab 任务带日期输出
- Microsoft SQL - 操作语句
- Oracle 11.2.0.4.0 Dataguard部署和日常维护(5)-Datauard 主备切换和故障转移篇
- elasticsearch 测试