HTML5 Canvas (2)

sco.struts

浏览: 18897 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 canvas 漸變

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Demo</title>

	<script>
		function createCanopyPath(context) {
			// Draw the tree canopy
			context.beginPath();
			context.moveTo(-25, -50);
			context.lineTo(-10, -80);
			context.lineTo(-20, -80);
			context.lineTo(-5, -110);
			context.lineTo(-15, -110);
			// Top of the tree
			context.lineTo(0, -140);
			context.lineTo(15, -110);
			context.lineTo(5, -110);
			context.lineTo(20, -80);
			context.lineTo(10, -80);
			context.lineTo(25, -50);
			// Close the path back to its start point
			context.closePath();
		}

		function drawTree(context) {
			// Create a 3 stop gradient horizontally across the trunk
			var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
			// The beginning of the trunk is medium brown
			trunkGradient.addColorStop(0, '#663300');
			// The middle-left of the trunk is lighter in color
			trunkGradient.addColorStop(0.4, '#996600');
			// The right edge of the trunk is darkest
			trunkGradient.addColorStop(1, '#552200');
			// Apply the gradient as the fill style, and draw the trunk
			context.fillStyle = trunkGradient;
			context.fillRect(-5, -50, 10, 50);

			// A second, vertical gradient creates a shadow from the
			// canopy on the trunk
			var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
			// The beginning of the shadow gradient is black, but with
			// a 50% alpha value
			canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
			// Slightly further down, the gradient completely fades to
			// fully transparent. The rest of the trunk gets no shadow.
			canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
			// Draw the shadow gradient on top of the trunk gradient
			context.fillStyle = canopyShadow;
			context.fillRect(-5, -50, 10, 50);

			// Create the shape for our canopy path
			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, 230);
			drawTree(context);
			context.restore();

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

			context.save();
			context.translate(-10, 350);
			
			//道路
			context.beginPath();
			// The first curve bends up and right
			context.moveTo(0, 0);
			context.quadraticCurveTo(170, -50, 260, -190);
			// The second curve continues down and right
			context.quadraticCurveTo(310, -250, 410,-250);
			// Draw the path in a wide brown stroke
			context.strokeStyle = '#663300';
			context.lineWidth = 20;
			context.stroke();
			// Restore the previous canvas state
			context.restore();
		}

		window.addEventListener("load", drawTrails, true);
	</script>

</head>

<body>
	<canvas id="trails" style="border: 1px solid;" width="400" height="600">
	</canvas>
</body>
</html>

分享到：

Android讀書筆記(1)：撥號程序

2012-07-19 17:32
浏览 917
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Canvas (2)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Canvas (2)

评论

发表评论

相关推荐

HTML5 Canvas (1)

IBM：使用AJAX构建应用程序

最近访客更多访客>>