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>