一.什么是<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）准备画布
<canvas id="canvas" width="300" height="300" style="border:1px solid"></canvas> |
（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() ); //把顺时针旋转角度和当前时间的秒和毫秒变化 关联在一起 ctx.translate(105,0); ctx.fillRect(0,-12,50,24); ctx.drawImage(earth,-12,-12);//把地球图形,添加到画布上 //画太阳 ctx.drawImage(sun,0,0,300,300); window.requestAnimationFrame(draw); |
（5）绘制轨道
//画地球旋转轨道 ctx.restore();//最初状态 (原点没有移动过) ctx.beginPath(); ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit,关联关系,半径 = 地球相对第二原点(150,150) 向右移动的距离 ctx.stroke();//绘线 |
