一.什么是<canvas>
<canvas> 畫布標簽常用于繪制圖像，但是，<canvas> 元素本身并沒有繪制能力，它僅僅是圖形的容器，要想通過<canvas>畫布標簽來繪制圖像，還需要調(diào)用js方法。其中最常見得方法是getContext()方法，它可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性，可在畫布上繪制文本、線條、矩形、圓形等等。今天就利用<canvas> 畫布來繪制一下地球軌道的效果。
圖1.1 效果圖
二.<canvas>基礎(chǔ)知識介紹
canvas只有height高度和width寬度兩個屬性。其默認畫布大小是300×150（寬×高）矩形畫布。<canvas> 畫布的基礎(chǔ)就不再介紹了，因為之前看到過一篇關(guān)于<canvas>畫布知識的介紹，鏈接如下：
https://mp.weixin.qq.com/s/B3T8ERjAEjlwG6HU_RLEYw。
這里再說一下清除畫布。這里需要注意的就是：當畫布的高度或?qū)挾缺恢匦略O(shè)置時, 畫布內(nèi)容就會被清空（還可以利用用 clearRect() 方法也可以清空畫布）。代碼如下：
function clearCanvas()//清空畫布
{
c.height=c.height;
}
三.繪制地球軌道圖
（1）準備畫布
<canvas id="canvas" width="300" height="300" style="border:1px solid"></canvas>
（2）調(diào)用畫筆，設(shè)置畫筆顏色等。
這里就是用到了clearRect（）方法清除畫布。globalCompositeOperation 屬性設(shè)置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。（源圖像 = 您打算放置到畫布上的繪圖：目標圖像 = 您已經(jīng)放置在畫布上的繪圖）
function draw() {
//調(diào)用畫筆
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();//最初狀態(tài)
（3）利用JavaScript開始繪制。首先先創(chuàng)建對象，然后對整個頁面進行初始化。這里要用到動畫命名，采用requestAnimationFrame()方法。這個方法是告訴瀏覽器執(zhí)行動畫，并請求瀏覽器調(diào)用指定的函數(shù)以在下次重繪之前更新動畫。該方法將回調(diào)作為在重繪之前調(diào)用的參數(shù)。注意：如果要在下次重繪時為另一幀設(shè)置動畫，則回調(diào)例程必須自己調(diào)用requestAnimationFrame()。
var sun = new Image();
var earth = new Image();
//對整個頁面的初始化
function init(){
sun.src = "img/太陽.png";
earth.src ="img/地球.png";
window.requestAnimationFrame(draw);}
（4）畫地球和太陽。這里介紹一下時間的獲取。常用getSeconds()方法獲取秒，它的返回值是一個整數(shù)且在0-59之間。用dateObject（）方法獲取毫秒字段，以本地時間顯示。用getMilliseconds()方法獲取毫秒，它的返回值是一個整數(shù)且在 0-999 之間。
//畫地球
ctx.translate(150,150);//畫布原點移動
var time = new Date();
ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); //把順時針旋轉(zhuǎn)角度和當前時間的秒和毫秒變化 關(guān)聯(lián)在一起
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）繪制軌道
//畫地球旋轉(zhuǎn)軌道
ctx.restore();//最初狀態(tài) (原點沒有移動過)
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit,關(guān)聯(lián)關(guān)系,半徑 = 地球相對第二原點(150,150) 向右移動的距離
ctx.stroke();//繪線
END編 輯 | 王楠嵐
責 編 | 劉 連
where2go 團隊
微信號：算法與編程之美
