canvas实现动画地球绕太阳公转月球绕地球公转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>canvas</title>
</head><body><div>地球公转速度：<input type="input" value="60" id="m-earth-speed"> 月球公转速度：<input type="input" value="6" id="m-moon-speed"><input type="button" id="m-btn" value='设置'></div><canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script>$(function() {var myAction = {},ctx, earchSpeed = 60,moonSpeed = 6;var dom = {earchSpeed: $('#m-earth-speed'),moonSpeed: $('#m-moon-speed'),btn: $('#m-btn'),canvas: $('#myCanvas')};$.extend(myAction, {initCanvas: function() {ctx = dom.canvas[0].getContext("2d");myAction.draw();},draw: function() {ctx.clearRect(0, 0, 300, 300); //清空所有的内容ctx.fillRect(0, 0, 300, 300);//绘制太阳ctx.save();ctx.beginPath();ctx.fillStyle = "yellow";ctx.arc(150, 150, 20, 0, Math.PI * 2);ctx.fill();ctx.restore();ctx.save();ctx.translate(150, 150);//绘制地球轨道ctx.beginPath();ctx.strokeStyle = "rgba(255,255,0,0.5)";ctx.arc(0, 0, 100, 0, 2 * Math.PI);ctx.stroke()var time = new Date();//绘制地球ctx.rotate(2 * Math.PI / earchSpeed * time.getSeconds() + 2 * Math.PI / (earchSpeed * 1000) * time.getMilliseconds());ctx.translate(100, 0);ctx.beginPath();ctx.fillStyle = "blue";ctx.arc(0, 0, 10, 0, Math.PI * 2);ctx.fill();//绘制月球轨道ctx.beginPath();ctx.strokeStyle = "rgba(255,255,255,.3)";ctx.beginPath();ctx.arc(0, 0, 40, 0, 2 * Math.PI);ctx.stroke();//绘制月球ctx.rotate(2 * Math.PI / moonSpeed * time.getSeconds() + 2 * Math.PI / (moonSpeed * 1000) * time.getMilliseconds());ctx.translate(40, 0);ctx.fillStyle = "#ffffff";ctx.beginPath();ctx.arc(0, 0, 4, 0, Math.PI * 2);ctx.fill();ctx.restore();requestAnimationFrame(myAction.draw);},initEvent: function() {dom.btn.on('click', function() {earchSpeed = dom.earchSpeed.val() - 0;moonSpeed = dom.moonSpeed.val() - 0;});}});var init = function() {myAction.initCanvas();myAction.initEvent();}();})</script>
</body></html>

canvas实现动画地球绕太阳公转月球绕地球公转相关推荐

地球和月球的转动(二)
子贡曰:"贫而无谄,富而无骄,何如?"子曰:"可也:未若贫而乐,富而好礼者也."子贡曰:"诗云:'如切如磋,如琢如磨',其斯之谓与?"子曰: ...
html月球绕地球转,CSS3地球公转，月球绕地球转
CSS3地球公转,月球绕地球转 -何问起 .box{ transform: scale(0.5); position: relative; padding: 1px; height: 300px; w ...
canvas 模拟地球绕太阳转动月球绕地球转动
requestAnimationFrame,Web中写动画的另一种选择 HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes ...
Canvas模拟太阳地球月球的运动过程
先看效果图代码 package com.test.paintdemo.pathrelate;import android.content.Context; import android.graphi ...
Canvas模拟地球，月球公转
前言众所周知,地球绕着太阳公转,月球作为地球的卫星,绕着地球沿着一定的轨道在旋转,这儿用圆来模拟地球和月球的旋转轨道(实际为椭圆). 正文首先来分析,如何画一个绕着太阳不停旋转的地球.大家都知道c ...
android画图旋转地球*月球,Unity3D实现月球绕地球旋转的C#脚本
演示了用RotateAround实现月球绕地球旋转. 源代码如下: using UnityEngine; using System.Collections; public class MoonAndE ...
基于Canvas的动画基本原理与数理分析
转载自https://www.jianshu.com/p/e70c9cfbdb38 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句 ...
python月球和地球体重_地球和月球围绕太阳运行，与Python玩游戏
我想在pygame中用python代码使太阳系只有两个性质:地球绕太阳转,月球绕地球连续运行.这是我的代码:import sys, random, math import pygame from py ...
OpenGL模拟太阳、地球、月球公转自转
// OpenGL_Prac.cpp : Defines the entry point for the console application. // #include "stdafx.h ...

canvas实现动画地球绕太阳公转月球绕地球公转

canvas实现动画地球绕太阳公转月球绕地球公转相关推荐

最新文章

热门文章

canvas实现动画 地球绕太阳公转 月球绕地球公转

canvas实现动画 地球绕太阳公转 月球绕地球公转相关推荐

最新文章

热门文章

canvas实现动画地球绕太阳公转月球绕地球公转

canvas实现动画地球绕太阳公转月球绕地球公转相关推荐