一.什么是<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() 方法也可以清空画布）。代码如下：
代码语言：javascript复制
function clearCanvas()//清空画布
{
c.height=c.height;
}三.绘制地球轨道图
（1）准备画布
代码语言：javascript复制
<canvas id="canvas" width="300" height="300" style="border:1px solid"></canvas>（2）调用画笔，设置画笔颜色等。
这里就是用到了clearRect（）方法清除画布。globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。（源图像 = 您打算放置到画布上的绘图：目标图像 = 您已经放置在画布上的绘图）
代码语言：javascript复制 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()。
代码语言：javascript复制
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 之间。
代码语言：javascript复制//画地球
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）绘制轨道
代码语言：javascript复制//画地球旋转轨道
ctx.restore();//最初状态 (原点没有移动过)
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit,关联关系,半径 = 地球相对第二原点(150,150) 向右移动的距离
ctx.stroke();//绘线END
编 辑 | 王楠岚
责 编 | 刘 连
