1 function createCanopyPath(context) {
2 //绘制树冠
3 context.beginPath();
4
5 context.moveTo(-25, -50);
6 context.lineTo(-10, -80);
7 context.lineTo(-20, -80);
8 context.lineTo(-5, -110);
9 context.lineTo(-15, -110);
10
11 //树的顶点
12 context.lineTo(0, -140);
13
14 context.lineTo(15, -110);
15 context.lineTo(5, -110);
16 context.lineTo(20, -80);
17 context.lineTo(10, -80);
18 context.lineTo(25, -50);
19
20 //连接起点，闭合路径
21 context.closePath();
22 }
23
24 function drawTrails() {
25 var canvas = document.getElementById('trails');
26 var context = canvas.getContext('2d');
27
28 context.save();
29 context.translate(130, 250);
30
31 //创建表现树冠的路径
32 createCanopyPath(context);
33
34 //加宽线条
35 context.lineWidth = 4;
36
37 //平滑路径的接合点
38 context.lineJoin = 'round';
39
40 //将颜色改成棕色
41 context.strokeStyle = '#663300';
42
43 //将这条线绘制到canvas上
44 context.stroke();
45
46 //将填充色设置为绿色并填充
47 context.fillStyle = '#339900';
48 context.fill();
49
50 //将填充色设为棕色
51 context.fillStyle = '#663300';
52
53 //填充用作树干的矩形区域
54 context.fillRect(-5, -50, 10, 50);
55
56 //绘制当前路径
57 context.restore();
58
59 //保存canvas的状态并绘制路径
60 context.save();
61
62 context.translate(-10, 350);
63 context.beginPath();
64
65 //第一条曲线向右上方弯曲
66 context.moveTo(0, 0);
67 context.quadraticCurveTo(170, -50, 260, -190);
68
69 //第二条曲线向右下方弯曲
70 context.quadraticCurveTo(310, -250, 410, -250);
71
72 //使用棕色的粗线条来绘制路径
73 context.strokeStyle = '#663300';
74 context.lineWidth = 20;
75 context.stroke();
76
77 //恢复之前的canvas状态
78 context.restore();
79 }
80
81 window.addEventListener("load", drawTrails, true);
1 <!DOCTYPE HTML>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <canvas id="trails" style="border:1px solid;" width="400" height="600"></canvas>
9 <script src="index.js"></script>
10 </body>
11 </html>
