上篇通過對canvas 畫對角線，了解了一些canvas畫圖基本原理。現在可以利用HTML5 canvas API創建一個場景：帶有長跑跑道的樹林。
本篇大綱
- 用canvas API繪制樹木的樹冠
- 為樹冠的邊框架加粗並且填充樹冠顏色
- 為樹冠創造一個強大的樹干
- 繪制跑道
用canvas API繪制樹木的樹冠
原理還是與上篇畫對角線一樣，只是步驟增多而已，先看代碼：
function createCanopyPath(context){
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath();
}
function drawTrails(){
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
context.stroke();
context.restore();
}
window.addEventListener("load",drawTrails, true);
</script>
DEMO效果如下：
上面的代碼中有一個特殊的函數叫做closePath。這個函數的行為同lineTo很像，唯一的差別在於closePath會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形己經閉合或者形成了完全封閉的區域。
為樹冠的邊框架加粗並且填充樹冠顏色
為了使樹冠更加形象並且看起來像真的樹，不得不利用canvas 的API繪制其圖形外觀，代碼如下：
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
// 加寬線條
context.lineWidth=4;
// 平滑路徑的接合點
context.lineJoin='round';
// 將顏色改成棕色
context.strokeStyle='#663300';
// 將填充色設置為綠色並填充樹冠
context.fillStyle='#339900';
context.fill();
context.stroke();
context.restore();
}
DEMO效果見下面運行效果：
lineJoin屬性設置為round，這是修改當前形狀中線段的連接方式，讓拐角變得更加油；也可以把lineJoin屬性設置成bevel或者miter來變換拐角樣式。
strokeStyle屬性是為了改變線條顏色。
fillStyle屬性是為了設置填充顏色
context 的fill 函數是為了可以讓canvas對當前圖形中所有的閉合路徑內部的像素點進行填充，配合fillStyle 填充內部像形點顏色。
為樹冠創造一個強大的樹干
創建樹干有兩種方法：
- 用我們上面學過的使用線條然后配合closePath畫樹干
- HTML5 提供了一個強大的填充矩形的函數 fillRect 可以畫一塊矩形x軸、y軸、需要畫的寬度和高度即可
在這里我們使用fillRect 來構建樹干。代碼如下：
context.fillRect(-5,-50,10,50);
效果DEMO如下：
與fillRect相關的函數還有：strokeRect和clearRect。strokeRect的作用是基於給出的位置和坐標畫出矩形的輪廓，clearRect的作用是清除矩形區域內的所有內容並將它恢復到初始狀態，即透明。
繪制跑道
完成本篇最后一個功能，在小樹旁邊畫上一個跑道。代碼如下：
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
// 加寬線條
context.lineWidth=4;
// 平滑路徑的接合點
context.lineJoin='round';
// 將顏色改成棕色
context.strokeStyle='#663300';
// 將填充色設置為綠色並填充樹冠
context.fillStyle='#339900';
context.fill();
context.fillStyle='#663300';
context.fillRect(-5,-50,10,50);
context.stroke();
context.restore();
context.save();
context.translate(-10,350);
context.beginPath();
context.moveTo(0,0);
// 第一條曲線向右上方彎曲
context.quadraticCurveTo(170,-50,260,-190);
// 第二條曲線向右下方彎曲
context.quadraticCurveTo(310,-250,410,-250);
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
context.restore();
}
quadraticCurveTo函數繪制曲線的起點是當前坐標，帶有兩組(x,y)參數。第二組是指曲線的終點。第一組代表控制點。所謂的控制點位於曲線的旁邊，其作用相當於對曲線產生一個拉力。通過高速控制點的位置，就可以改變曲線的曲率。在右上方再畫一條一樣的曲線，以形成一條路。DEMO效果如下：
與quadraticCureTo函數一樣的曲線功能還涉及：bezierCurveTo、arcTo和arc函數。這些函數通過多種控制點（如半徑、角度和等）讓曲線更具可塑性。
本文參考自：pro HTML5 Programming.