<script type="text/javascript">
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>
復制代碼
上面的代碼中有一個特殊的函數叫做closePath。這個函數的行為同lineTo很像，唯一的差別在于closePath會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形己經閉合或者形成了完全封閉的區域。
function drawTrails(){
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.stroke();
context.restore();
}
復制代碼
lineJoin屬性設置為round，這是修改當前形狀中線段的連接方式，讓拐角變得更加油；也可以把lineJoin屬性設置成bevel或者miter來變換拐角樣式。
context.fillStyle='#663300';
context.fillRect(-5,-50,10,50);
復制代碼
與fillRect相關的函數還有：strokeRect和clearRect。strokeRect的作用是基于給出的位置和坐標畫出矩形的輪廓，clearRect的作用是清除矩形區域內的所有內容并將它恢復到初始狀態，即透明。
function drawTrails(){
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函數。這些函數通過多種控制點（如半徑、角度和等）讓曲線更具可塑性。
