前端|利用<canvas>画布制作地球轨道

最新推荐文章于 2023-09-13 10:37:58 发布

算法与编程之美

最新推荐文章于 2023-09-13 10:37:58 发布

阅读量1.3k

点赞数

《算法与编程之美》技术专栏荣获2020年腾讯云+社区“人气作者”优秀专栏，2021年荣获“CSDN博客专家”称号，全网累计阅读量突破100万人次。

本文链接：https://blog.csdn.net/gschen_cn/article/details/105525558

版权

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

一.什么是<canvas>

<canvas> 画布标签常用于绘制图像，但是，<canvas> 元素本身并没有绘制能力，它仅仅是图形的容器，要想通过<canvas>画布标签来绘制图像，还需要调用js方法。其中最常见得方法是getContext()方法，它可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，可在画布上绘制文本、线条、矩形、圆形等等。今天就利用<canvas> 画布来绘制一下地球轨道的效果。

图1.1 效果图

二.<canvas>基础知识介绍

canvas只有height高度和width宽度两个属性。其默认画布大小是300×150（宽×高）矩形画布。<canvas> 画布的基础就不再介绍了，因为之前看到过一篇关于<canvas>画布知识的介绍，链接如下：

https://mp.weixin.qq.com/s/B3T8ERjAEjlwG6HU_RLEYw。

这里再说一下清除画布。这里需要注意的就是：当画布的高度或宽度被重新设置时, 画布内容就会被清空（还可以利用用 clearRect() 方法也可以清空画布）。代码如下：

function clearCanvas()//清空画布

{

c.height=c.height;

}

三.绘制地球轨道图

（1）准备画布

（2）调用画笔，设置画笔颜色等。

这里就是用到了clearRect（）方法清除画布。globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。（源图像 = 您打算放置到画布上的绘图：目标图像 = 您已经放置在画布上的绘图）

function draw() {

//调用画笔

var ctx = document.getElementById('canvas').getContext('2d');

ctx.globalCompositeOperation = 'destination-over';

ctx.clearRect(0,0,300,300); //清空画布

ctx.fillStyle = 'rgba(0,0,0,0)';

ctx.strokeStyle = 'deepskyblue';//指定绘线颜色

ctx.save();//最初状态

（3）利用JavaScript开始绘制。首先先创建对象，然后对整个页面进行初始化。这里要用到动画命名，采用requestAnimationFrame()方法。这个方法是告诉浏览器执行动画，并请求浏览器调用指定的函数以在下次重绘之前更新动画。该方法将回调作为在重绘之前调用的参数。注意：如果要在下次重绘时为另一帧设置动画，则回调例程必须自己调用requestAnimationFrame()。

var sun = new Image();

var earth = new Image();

//对整个页面的初始化

function init(){

sun.src = "img/太阳.png";

earth.src ="img/地球.png";

window.requestAnimationFrame(draw);}

（4）画地球和太阳。这里介绍一下时间的获取。常用getSeconds()方法获取秒，它的返回值是一个整数且在0-59之间。用dateObject（）方法获取毫秒字段，以本地时间显示。用getMilliseconds()方法获取毫秒，它的返回值是一个整数且在 0-999 之间。

//画地球

ctx.translate(150,150);//画布原点移动

var time = new Date();

ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); //把顺时针旋转角度和当前时间的秒和毫秒变化关联在一起