Canvas绘图（二）

 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>