现在的位置: 首页 > web前端 > 正文

用html5做的树

2018年05月16日 web前端 ⁄ 共 3113字 ⁄ 字号 评论关闭
	<!doctype html> 
	<html lang="en"> 
	<head> 
	<meta charset="utf-8"> 
	<title></title> 
	</head> 
	<body> 
	<header> 
	 55
	</header> 
	 
	<div role="main"> 
		<canvas id = "trails"  style="border: 1px solid;" width="400" height="500"></canvas>
		<script type="text/javascript">
		
			function createCanopyPath(context){
			//
				context.beginPath();
				context.moveTo(-25,-50);
				context.lineTo(-10,-80);
				context.lineTo(-20,-80);
				context.lineTo(-5,-110);
				context.lineTo(-15,-110);
				context.lineTo(-15,-110);
				//树的顶点
				context.lineTo(0,-140);
				
				context.lineTo(15,-110);
				context.lineTo(5,-110);
				context.lineTo(20,-80);
				context.lineTo(10,-80);
				context.lineTo(25,-50);
				
				context.closePath();
			};
			
			function drawTrails(context){
				
				//加宽线条
				context.lineWidth = 4;
				//平滑路径的接合点
				context.lineJoin =  "round";
				//将颜色改成棕色
				context.strokeStyle  = "#663300";
				//用填充色设置为绿色并填充树冠
				context.fillStyle =  "#339900";
				//创建表现树冠的路径
				createCanopyPath(context);
				//填充它。
				context.fill();
				context.stroke();	

				
				//渐变做树干
				//创建用作树干纹理的三阶水平渐变
				var trunkGradient = context.createLinearGradient(-5,-50,5,-50);
				//树干的左侧边缘是一一般程度的棕色
				trunkGradient.addColorStop(0,"#663300");
				//树干中间偏左的位置颜色要淡一些
				trunkGradient.addColorStop(0.4,"#996600");
				//树干右侧边缘的颜色要深一些。
				trunkGradient.addColorStop(1,"#552200");
				//使用渐变色填充树干
				context.fillStyle = trunkGradient;
				context.fillRect(-5,-50,10,50);
				
				//接下来,创建垂直渐变,以用作树冠在树干上投影。
				var canopyShadow = context.createLinearGradient(0,-50,0,0);
				//投影渐变起点是50%的黑色 
				canopyShadow.addColorStop(0,"rgba(0,0,0,0.5)");
				//方向垂直向下,渐变色在很短的距离内迅速渐变到完全透明,这段长度之外的树干上没有投影。
				canopyShadow.addColorStop(0.2,"rgba(0,0,0,0.0)");
				//在树干上填充投影渐变
				context.fillStyle=canopyShadow;
				context.fillRect(-5,-50,10,50);
				
				

			};
			
			function drawRoad(context){
				
				context.translate(-10,350);
				//表示开始画线,凡是线都是要先调用这个方法,而圆,方块等,是有自己可以直接创建的方法的。
				context.beginPath();
				
				//详情请查贝赛尔曲线。
				context.moveTo(0,0);
				context.quadraticCurveTo(170,-50,260,-190);
				//第二条曲线向右下方弯曲
				context.quadraticCurveTo(310,-250,410,-250);
				//使用棕色的粗线条来绘制路径,如果没有以下两句话,它只是一条直线。
				context.strokeStyle = "#663300";
				context.lineWidth = 20;
				context.stroke();
				
				
			}
			//为树创建阴影
			function drawYinYing(context){
				context.transform(1,0,-0.5,1,0,0);
				context.scale(1,0.6);
				context.fillStyle = "rgba(0,0,0,0.2)";
				context.fillRect(-5,-50,10,50);
				createCanopyPath(context);
				context.fill();
			}
			
			//为图片写字
			function drawFont(context){
				context.font =  "60px impact";
				context.fillStyle = "#996600";
				context.textAlign  =  "center";
				context.fillText("Happy Trails",200,60,400);
			}
			
			//图片采用了回调模式,因为在HTML5中要想使用图片必须等到图片加载完成以后
			//才能够往画布上画东西,所以用到回调模式。
			
			window.onload = function(){
				var canvas  = document.getElementById("trails");
				var context = canvas.getContext("2d");
				
				context.save();
				context.translate(130,250);
				drawTrails(context);
				context.restore();
				
				context.save();
				context.translate(260,500);
				//将第二棵树分别放大到原来的2倍
				context.scale(2,2);
				drawTrails(context);
				context.restore();
				
				//阴影
				context.save();
				context.translate(130,250);
				drawYinYing(context);
				context.restore();
				
				//阴影2
				context.save();
				context.translate(260,500);
				context.scale(2,2);
				drawYinYing(context);
				context.restore();
				
				//路
				context.save();
				drawRoad(context);
				context.restore();
				//文字
				context.save();
				drawFont(context);
				context.restore();
				
				//文字阴影
				context.save();
				//阴影为黑色,透明度为20%
				context.shadowColor = "rgba(0,0,0,0.2)";
				//将阴影向右移动15,向上移动10
				context.shadowOffsetX  = 15;
				context.shadowOffsetY = -10;
				//轻微模糊阴影
				context.shadowBlur = 2;
				drawFont(context);
				context.restore();
				
			}
			
		</script>
		
		
	</div> 
	 
	<footer> 
 333
	</footer> 
     </body> 
	</html> 

抱歉!评论已关闭.