HTML5_树（HTML5 高级程序设计）
教程管理员 发布于2023-09-27 22:26 HTML教程 131
简介：
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>
使用html5的canvas实现这么一个图
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>
相关推荐
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序，Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 10-04 ie下tbody的innerhtml属性只读
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-
