使用html5的canvas实现这么一个图
View Code
1
<
html
>
2 < meta charset ="utf-8" />
3 < title >Canvas tree title >
4 < canvas id ="tree" width ="500" height ="500" > canvas >
5 < script >
6 function createCanopyPath(context)
7 {
8 context.beginPath();
9
10 context.moveTo( - 25 , - 50 );
11 context.lineTo( - 10 , - 80 );
12 context.lineTo( - 20 , - 80 );
13 context.lineTo( - 5 , - 110 );
14 context.lineTo( - 15 , - 110 );
15
16 context.lineTo( 0 , - 140 );
17
18 context.lineTo( 15 , - 110 );
19 context.lineTo( 5 , - 110 );
20 context.lineTo( 20 , - 80 );
21 context.lineTo( 10 , - 80 );
22 context.lineTo( 25 , - 50 );
23
24 context.closePath();
25 }
26
27 function drawTree(context)
28 {
29 var trunkGradient = context.createLinearGradient( - 5 , - 50 , 5 , - 50 );
30
31 trunkGradient.addColorStop( 0 , ' #663300 ' );
32 trunkGradient.addColorStop( 0.4 , ' #996600 ' );
33 trunkGradient.addColorStop( 1 , ' #552200 ' );
34
35 context.fillStyle = trunkGradient;
36 context.fillRect( - 5 , - 50 , 10 , 50 );
37
38 var canopyShadow = context.createLinearGradient( 0 , - 50 , 0 , 0 );
39
40 canopyShadow.addColorStop( 0 , ' rgba(0,0,0,0.5) ' );
41 canopyShadow.addColorStop( 0.2 , ' rgba(0,0,0,0.0) ' );
42
43 context.fillStyle = canopyShadow;
44 context.fillRect( - 5 , - 50 , 10 , 50 );
45
46 createCanopyPath(context);
47 context.lineWidth = 4 ;
48 context.lineJoin = ' round ' ;
49 context.strokeStyle = " #663300 " ;
50 context.stroke();
51
52 context.fillStyle = " #339900 " ;
53 context.fill();
54
55 context.save();
56 context.transform( 1 , 0 , - 0.5 , 1 , 0 , 0 );
57 context.scale( 1 , 0.6 );
58 context.fillStyle = ' rgba(0,0,0,0.2) ' ;
59 context.fillRect( - 5 , - 50 , 10 , 50 );
60
61 createCanopyPath(context);
62 context.fill();
63 context.restore();
64 }
65
66 function drawRoad(context)
67 {
68 context.save();
69 context.translate( - 10 , 350 );
70 context.beginPath();
71
72 context.moveTo( 0 , 0 );
73 context.quadraticCurveTo( 170 , - 50 , 260 , - 190 );
74
75 context.quadraticCurveTo( 310 , - 250 , 410 , - 250 );
76
77 context.strokeStyle = " #663300 " ;
78 context.lineWidth = 20 ;
79 context.stroke();
80
81 context.restore();
82 }
83
84
85 function drawTrails()
86 {
87 var canvas = document.getElementById( " tree " );
88 var context = canvas.getContext( " 2d " );
89
90 context.save();
91
92 context.translate( 130 , 250 );
93 drawTree(context);
94 context.restore();
95
96 context.save();
97 context.translate( 260 , 500 );
98
99 context.scale( 2 , 2 );
100 drawTree(context);
101 context.restore();
102
103 drawRoad(context);
104
105 context.save();
106 context.font = " 60px impact " ;
107 context. fillStyle = " #996600 " ;
108 context.textAlign = " center " ;
109
110 context.shadowColor = " rgba(0,0,0,0.2) " ;
111 context.shadowOffsetX = 15 ;
112 context.shadowOffsetY = 10 ;
113 context.shadowBlue = 2 ;
114
115 context.fillText( " Happy! " , 200 , 60 , 400 );
116 context.restore();
117 }
118
119 drawTrails();
120 script >
121 html >
2 < meta charset ="utf-8" />
3 < title >Canvas tree title >
4 < canvas id ="tree" width ="500" height ="500" > canvas >
5 < script >
6 function createCanopyPath(context)
7 {
8 context.beginPath();
9
10 context.moveTo( - 25 , - 50 );
11 context.lineTo( - 10 , - 80 );
12 context.lineTo( - 20 , - 80 );
13 context.lineTo( - 5 , - 110 );
14 context.lineTo( - 15 , - 110 );
15
16 context.lineTo( 0 , - 140 );
17
18 context.lineTo( 15 , - 110 );
19 context.lineTo( 5 , - 110 );
20 context.lineTo( 20 , - 80 );
21 context.lineTo( 10 , - 80 );
22 context.lineTo( 25 , - 50 );
23
24 context.closePath();
25 }
26
27 function drawTree(context)
28 {
29 var trunkGradient = context.createLinearGradient( - 5 , - 50 , 5 , - 50 );
30
31 trunkGradient.addColorStop( 0 , ' #663300 ' );
32 trunkGradient.addColorStop( 0.4 , ' #996600 ' );
33 trunkGradient.addColorStop( 1 , ' #552200 ' );
34
35 context.fillStyle = trunkGradient;
36 context.fillRect( - 5 , - 50 , 10 , 50 );
37
38 var canopyShadow = context.createLinearGradient( 0 , - 50 , 0 , 0 );
39
40 canopyShadow.addColorStop( 0 , ' rgba(0,0,0,0.5) ' );
41 canopyShadow.addColorStop( 0.2 , ' rgba(0,0,0,0.0) ' );
42
43 context.fillStyle = canopyShadow;
44 context.fillRect( - 5 , - 50 , 10 , 50 );
45
46 createCanopyPath(context);
47 context.lineWidth = 4 ;
48 context.lineJoin = ' round ' ;
49 context.strokeStyle = " #663300 " ;
50 context.stroke();
51
52 context.fillStyle = " #339900 " ;
53 context.fill();
54
55 context.save();
56 context.transform( 1 , 0 , - 0.5 , 1 , 0 , 0 );
57 context.scale( 1 , 0.6 );
58 context.fillStyle = ' rgba(0,0,0,0.2) ' ;
59 context.fillRect( - 5 , - 50 , 10 , 50 );
60
61 createCanopyPath(context);
62 context.fill();
63 context.restore();
64 }
65
66 function drawRoad(context)
67 {
68 context.save();
69 context.translate( - 10 , 350 );
70 context.beginPath();
71
72 context.moveTo( 0 , 0 );
73 context.quadraticCurveTo( 170 , - 50 , 260 , - 190 );
74
75 context.quadraticCurveTo( 310 , - 250 , 410 , - 250 );
76
77 context.strokeStyle = " #663300 " ;
78 context.lineWidth = 20 ;
79 context.stroke();
80
81 context.restore();
82 }
83
84
85 function drawTrails()
86 {
87 var canvas = document.getElementById( " tree " );
88 var context = canvas.getContext( " 2d " );
89
90 context.save();
91
92 context.translate( 130 , 250 );
93 drawTree(context);
94 context.restore();
95
96 context.save();
97 context.translate( 260 , 500 );
98
99 context.scale( 2 , 2 );
100 drawTree(context);
101 context.restore();
102
103 drawRoad(context);
104
105 context.save();
106 context.font = " 60px impact " ;
107 context. fillStyle = " #996600 " ;
108 context.textAlign = " center " ;
109
110 context.shadowColor = " rgba(0,0,0,0.2) " ;
111 context.shadowOffsetX = 15 ;
112 context.shadowOffsetY = 10 ;
113 context.shadowBlue = 2 ;
114
115 context.fillText( " Happy! " , 200 , 60 , 400 );
116 context.restore();
117 }
118
119 drawTrails();
120 script >
121 html >