1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 function drawTree(context) {
14 // 创建用作树干纹理的三阶水平渐变
15 var trunkGradient = context.createLinearGradient(-5, -50, 50, -50);
16 // 树干的左侧边缘是一般程度的棕色
17 trunkGradient.addColorStop(0, '#663300');
18 // 树干中间偏左的位置颜色要淡一些
19 trunkGradient.addColorStop(0.4, '#996600');
20 // 树干右侧边缘的颜色要深一些
21 trunkGradient.addColorStop(1, '#552200');
22 // 使用渐变色填充树干
23 context.fillStyle = trunkGradient;
24 context.fillRect(-5, -50, 50, 100);
25 // 接下来，创建垂直渐变，以用作树冠在树干上投影
26 var canopyShadow = context.createLinearGradient(0, -50, 50, 100);
27 // 投影渐变的起点是透明度设为50%的黑色
28 canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
29 // 方向垂直向下，渐变色在很短的距离内迅速渐变至完全透明，这段长度之外的树干上没有投影
30 canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
31 // 在树干上填充投影渐变
32 context.fillStyle = canopyShadow;
33 context.fillRect(-5, -50, 50, 100);
34 /*createCanopyPath(context);
35 context.lineWidth = 4;
36 context.lineJoin = 'round';
37 context.strokeStyle = '#663300';
38 context.stroke();
39 context.fillStyle = '#339900';
40 context.fill(); */
41 }
42 var canvas = document.getElementById('diagonal');
43 var context = canvas.getContext('2d');
44 // 在(50,50)的位置绘制第一棵树
45 context.save();
46 context.translate(30, 30);
47 drawTree(context);
48 context.restore();
49 // 在(100,100)的位置绘制第二棵树
50 context.save();
51 context.translate(100, 100);
52 // 将第二棵树的宽高分别放大至原来的2倍
53 context.scale(2, 2);
54 drawTree(context);
55 context.restore();
56 }
57 </script>
58 </head>
59
60 <body>
61 <canvas id="diagonal" width="200" height="200"> </canvas>
62 </body>
63 </html>
