3、在Canvas下做图2 _Web前端

3、在Canvas上做图2
1、提取成函数

drawTree

function drawTree(context) {
			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 canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();

		}

添加放大的树全部代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>drawTree</title>
	</head>
	<script>
		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(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 drawTree(context) {
			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 canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();

		}

		function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");

			context.save();

			context.translate(130,250);
			drawTree(context);
			context.restore();

			//保存canvas的状态并绘制路径
			context.save();

			context.translate(260,500);
			context.scale(2,2);
			drawTree(context);
			context.restore();

			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();

			//恢复之前的canvas状态
			context.restore();

		}

		window.addEventListener("load",drawTrails,true);
	</script>
	<body>
		<canvas id="trails" style="border:1px solid;" width="400" height="600">
		</canvas>
	</body>
</html>

结果：

2、加阴影
在DrawTree中加入画阴影的代码：

	function drawTree(context) {
			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 canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();
          
            context.save();
            //X值随着Y值的增加面增加，借助拉伸变换，可创建一棵作阴影的树
            context.transform(1,0,-0.5,1,0,0);
            //在Y轴方向
            context.scale(1,0.6);
            
            context.fillStyle='rgba(0,0,0,0.2)';
            context.fillRect(-5,-50,10,50);
            createCanopyPath(context);
            context.fill();
            
            context.restore();
		}

结果：

3、加入文本
加入如下代码

function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");
			context.save();
			context.font='60px impact';
			context.fillStyle='#996600';
			context.textAlign='center';
			context.fillText('Happy Trails!',200,60,400);
			context.restore();

			context.save();

显示结果：

4、应用阴影，字体
添加如下代码：

function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");
			context.save();
			context.font='60px impact';
			context.fillStyle='#996600';
			context.textAlign='center';
			//加阴影
			context.shadowColor='rgba(0,0,0,0.2)';
			context.shadowOffsetX=15;
			context.shadowOffsetY=-10;
			context.shadowBlur=2;
			
			context.fillText('Happy Trails!',200,60,400);
			context.restore();

结果：

全部代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>drawTree</title>
	</head>
	<script>
		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(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 drawTree(context) {
			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 canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();

			context.save();
			//X值随着Y值的增加面增加，借助拉伸变换，可创建一棵作阴影的树
			context.transform(1,0,-0.5,1,0,0);
			//在Y轴方向
			context.scale(1,0.6);

			context.fillStyle='rgba(0,0,0,0.2)';
			context.fillRect(-5,-50,10,50);
			createCanopyPath(context);
			context.fill();

			context.restore();
		}

		function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");
			context.save();
			context.font='60px impact';
			context.fillStyle='#996600';
			context.textAlign='center';
			//加阴影
			context.shadowColor='rgba(0,0,0,0.2)';
			context.shadowOffsetX=15;
			context.shadowOffsetY=-10;
			context.shadowBlur=2;

			context.fillText('Happy Trails!',200,60,400);
			context.restore();

			context.save();

			context.translate(130,250);
			drawTree(context);
			context.restore();

			//保存canvas的状态并绘制路径
			context.save();

			context.translate(260,500);
			context.scale(2,2);
			drawTree(context);
			context.restore();

			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();

		}

		window.addEventListener("load",drawTrails,true);
	</script>
	<body>
		<canvas id="trails" style="border:1px solid;" width="400" height="600">
		</canvas>
	</body>
</html>

2011-5-14 11:26 danny