<!DOCTYPE HTML>
<html>
<canvas id="trails" width="200" height="300" style="border:1px solid;"></canvas>
<script>
//在畫布上畫樹
function drawTrails()
{
var canvas=document.getElementById('trails');
var context=canvas.getContext('2d');
context.save();
context.translate(100,250);
//1、路徑
//創建表現樹冠的路徑
createCanopyPath(context);
//2、描邊樣式
//加寬線條
context.lineWidth=4;
//平滑路徑的接合點
context.linejoin='round';
//將顏色修改爲棕色
context.strokeStyle='#663300';
//3、填充樣式
//將填充色設置爲綠色並填充樹冠
context.fillStyle='#339900';
context.fill();
//4、填充矩形區域
//將填充色設置爲棕色
context.fillStyle='#663300';
//填充用作樹幹的矩形區域
context.fillRect(-5,-50,10,50);
//最後繪製樹冠
context.stroke();
context.restore();
}
window.addEventListener("load",drawTrails,true);
//用於繪製樹冠輪廓的函數
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();
}
</script>
</head>
</html>
![]()
