2、在Canvas下做图 _Web前端

2、在Canvas上做图
在Canvas上做图

1、绘制树冠轮廓

<!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 drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");

			context.save();
			context.translate(130,250);

			//创建表现树冠的路径
			createCanopyPath(context);

			//绘制当前路径
			context.stroke();
			context.restore();
		}

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

效果是画出树的外冠

2、描边样式
增加代码

//创建表现树冠的路径
			createCanopyPath(context);
            //加宽线条
            context.lineWidth=4;
            //平滑路径
            context.lineJoin='round';
            //将颜色改成棕色
            context.strokeStyle='#663300';  

			//绘制当前路径
			context.stroke();

结果：

3、填充样式
增加填充代码

			//将填充色设置为绿色并填充树冠
			context.fillStyle='#339900';
			context.fill();
			//绘制当前路径
			context.stroke();

结果：

4、填充矩形区域
增加填充矩形区域代码

	//将填充色设置为绿色并填充树冠
			context.fillStyle='#339900';
			context.fill();
			
			//将填充色设为棕色
			context.fillStyle="#663300";
			//填充用作树干的矩形区域
			context.fillRect(-5,-50,10,50);
			
			//绘制当前路径
			context.stroke();

结果：

5、绘制曲线
添加曲线

//绘制当前路径
			context.stroke();
			context.restore();

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

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

结果：

2011-5-14 9:13 danny

所有代码清单：

<!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 drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");

			context.save();
			context.translate(130,250);

			//创建表现树冠的路径
			createCanopyPath(context);
			//加宽线条
			context.lineWidth=4;
			//平滑路径
			context.lineJoin='round';
			//将颜色改成棕色
			context.strokeStyle='#663300';

			//将填充色设置为绿色并填充树冠
			context.fillStyle='#339900';
			context.fill();

			//将填充色设为棕色
			context.fillStyle= '#663300';
			//填充用作树干的矩形区域
			context.fillRect(-5,-50,10,50);

			//绘制当前路径
			context.stroke();
			context.restore();

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

			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="400">
		</canvas>
	</body>
</html>