<!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>
![]()
