通过Canvas绘制一个小型太阳系

绘制一个地球绕太阳转，月球绕地球转的小型太阳系

运行效果如下

代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>太阳系</title><style>*{margin:0;padding:0;}body{background-color: #000;overflow: hidden;}canvas{display:block;margin: -180px auto;}</style></head><body><canvas id="canvas" width='1000' height='1000'></canvas><script>var c=document.getElementById("canvas");var ctx=c.getContext("2d");//绘制背景function drawBackground(){ctx.strokeStyle = "#fff";//地球轨道ctx.beginPath();ctx.arc(500,500,250,0,2*Math.PI,false);ctx.stroke();//太阳ctx.beginPath();ctx.arc(500,500,50,0,2*Math.PI,false);ctx.fillStyle="yellow";ctx.fill();ctx.stroke();ctx.closePath();}//初始状态//太阳坐标（500，500），太阳半径50//地球轨道中心坐标（500，500），地球轨道半径250//地球半径20，地球坐标（750，500）//月球轨道中心坐标（750，500），月球轨道半径100//月球半径10，月球坐标（650，500）var cycle=365,time=0;function drawAll(){ctx.clearRect(0,0,c.width,c.height );drawBackground();var angle=time*(360/cycle)*Math.PI/180;    //Math.PI/180表示1度ctx.save();ctx.translate(500,500);ctx.rotate(angle);//改变画布基点ctx.translate(Math.cos(angle)*250,Math.sin(angle)*250);ctx.rotate(-2*angle);   //2倍于地球公转角度，便于看出月球的公转//画地球ctx.beginPath();ctx.arc(0,0,20,0,2*Math.PI,false);ctx.fillStyle="blue";ctx.fill();ctx.stroke();ctx.closePath();//画月球轨道，以地球为圆心ctx.beginPath();ctx.arc(0,0,100,0,2*Math.PI,false);ctx.stroke();ctx.closePath();//画月球ctx.beginPath();ctx.arc(-100,0,10,0,2*Math.PI,false);ctx.fillStyle="#F6F6F6";ctx.fill();ctx.stroke();ctx.closePath();ctx.restore();time++;    //角度会随时间增加}setInterval(drawAll,30);    //添加定时器，每30ms执行一次</script></body>
</html>

部分内容参考自【H5】canvas绘制太阳系

通过Canvas绘制一个小型太阳系相关推荐

用canvas绘制一个圆形，实现绕着一个中心运动
实现效果使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果. 这里只是一个实例Demo,直接运行就可以,下面附上代码: <!doctype ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
使用canvas绘制一个动态的表盘
使用canvas绘制一个动态的表盘技术要求需要一点点数学基础需要对 canvas 的常见的方法熟悉一点点数学基础角度转弧度的计算公式 canvas 常见的方法菜鸟教程扬帆起航首先创建一 ...
使用canvas 绘制一个有限度的斐波那契数列的曲线
昨天看到"前端面试中的常见的算法问题"的一篇文章,感觉有点挑战,所以才要实现使用canvas 绘制一个有限度的斐波那契数列的曲线,刚开始真是想破脑袋也实现不了,被下图中交接的线条搞 ...
【Canvas】js用canvas绘制一个钟表时钟动画效果
学习JavaScript的看过来,有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,旋转角度绘图这个重点掌握到了吗,这里有一个例子,如何用canvas画钟表时钟动图效果, ...
前端:用canvas绘制一个烟花动画
关注并将「趣谈前端」设为星标每日定时推送技术干货/优秀开源/技术思维前言在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶. 3阶) canvas 中绘制贝塞尔曲线几乎所有前端 ...
html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线
前言在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线它也可以用来描述一个缓动算法,设置css的transition-timin ...

通过Canvas绘制一个小型太阳系

通过Canvas绘制一个小型太阳系相关推荐

最新文章

热门文章