[Pro HTML5 Programming] 绘制栅格图 Canvas API

2012到2014

浏览: 68204 次

最近访客更多访客>>

sanshaoye7_510

huazhong3211

sxgn0423

低头麦穗

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

1、使用Canvas

在HTML页面添加<canvas></canvas>标签，然后用javascript控制它。

javascript控制操作canvas步骤：通过id获取canvas对象以及上下文、在上下文中操作canvas、绘制图像。

2、检查浏览器是否支持Canvas

<script>
	try{
		document.createElement('canvas').getContext('2d');
		document.getElementById('support').innerHTML = 'HTML5 Canvas is supported';
	}catch(e){
		document.getElementById('support').innerHTML = 'HTML5 Canvas is unsupported';
	}
</script>

<body>
	<span id='support'></span>
</body>

3、Canvas标签

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带边框的canvas元素 
<canvas width="200" height="200"></canvas> // 无边框的canvas元素

可以通过id获取Canvas对象

4、通过javascript控制Canvas

绘制一条直线

<script>
	function drawDiagonal()
	{
		var canvas=document.getElementById('diagonal_line'); //获得canvas对象
		var context=canvas.getContext('2d');  //获取canvas的上下文

		//用绝对坐标来创建一条路径
		context.beginPath();
		context.moveTo(0,0);//将光标左上角(0,0)
		context.lineTo(140,70);//直线路径，移到(140,70)

		//将这条线绘制到canvas上
		context.stroke();  //调用stroke或fill才会绘制
	}

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

<body>
	<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
</body>

5、绘制一棵小树

<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(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(){
		//获取canvas对象
		var canvas=document.getElementById('diagonal');
		var context=canvas.getContext('2d');
		
		//保存上下文，通过restore可得到保存的状态
		context.save();

		//将上下文平移到(130,250)
		context.translate(130,250);

		//创建路径
		createCanopyPath(context);

		//设置描边信息
		context.lineWidth=4; //加宽线条
		context.lineJoin='round'; //平滑连点
		context.strokeStyle='#663300'; //颜色设置成棕色
		context.stroke();  //画边
		
		//设置填充信息
		context.fillStyle='#339900';  //填充颜色
		context.fill();  //用颜色填充

		
		//使用渐变方式填充
		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);  //创建垂直渐变对象
		canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');  //0位置的渐变色是50%透明的黑色
		canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)');  //0.2位置是黑色
		context.fillStyle=canopyShadow;  //填充方式为渐变填充
		context.fillRect(-5,-50,10,50);
		
		//恢复上下文的状态
		context.restore();

		context.save();
		context.translate(-10,350);

		//画曲线
		context.beginPath();
		context.moveTo(0,0);
		context.quadraticCurveTo(170,-50,260,-190);
		context.quadraticCurveTo(310,-250,410,-250);

		//用图片填充，createPattern返回一个CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。可用作stokeStyle或fillStyle 属性的值。
		context.strokeStyle=context.createPattern(gravel,'repeat');

		context.lineWidth=20;
		context.stroke();
		context.restore();
    }
			
	var gravel=new Image();
     gravel.src="gravel.jpg";   
	//图片加载完成后，将其显示在canvas上.				
    gravel.onload=function(){
        drawTrails();
    } 
	
 window.addEventListener("load",drawTrails,true);
</script>

<body>
    <canvas id="diagonal" style="border:1px solid;" width="500" height="500"></canvas>
</body>

效果为：

6、改进小树

<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(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(){
		//获取canvas对象
		var canvas=document.getElementById('diagonal');
		var context=canvas.getContext('2d');
		
		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=context.createPattern(gravel,'repeat');   
        context.lineWidth=20;   
        context.stroke();   
        context.restore();   
		
		//绘制第一棵树
		context.save();
		context.translate(100,250);
		drawTree(context);
		context.restore();
		
		//绘制第二棵树
		context.save();
		context.translate(320,450);
		context.scale(2,2);  //放大两倍
		drawTree(context);
		context.restore();
		
		//绘制第三棵树，倒了
		context.save();
		context.translate(150,400);
		context.scale(1.5,1);
		context.rotate(1.57);
		drawTree(context);
		context.restore();
		
		drawText(context,'Happy Trails!');
    }
	
	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 canopyShadow=context.createLinearGradient(0,-50,0,0);  //创建垂直渐变对象
		canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');  //0位置的渐变色是50%透明的黑色
		canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)');  //0.2位置是黑色
		context.fillStyle=canopyShadow;  //填充方式为渐变填充
		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();
		context.transform(1,0,-0.5,1,0,0); //借助拉伸变换，产生倾斜
		context.scale(1,0.6);  //高度为60%
		context.fillStyle='rgba(0,0,0,0.2)';  //透明度为20%
		context.fillRect(-5,-50,10,50);
		createCanopyPath(context);
		context.fill();
		context.restore();
	}
	
	function drawText(context,text){
		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;

		//The fillText method takes four parameters (text,x,y,maxWidth).
		context.fillText(text,200,60,400);
		context.restore();
	}
			
	var gravel=new Image();
     gravel.src="gravel.jpg";   
	//图片加载完成后，将其显示在canvas上.				
    gravel.onload=function(){
        drawTrails();
    } 
	
	
 window.addEventListener("load",drawTrails,true);
</script>

<body>
    <canvas id="diagonal" style="border:1px solid;" width="500" height="500"></canvas>
</body>