欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

[Pro HTML5 Programming] 绘制栅格图 Canvas API 博客分类: HTML5  

程序员文章站 2024-03-11 12:42:19
...

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>
        

 效果为:
[Pro HTML5 Programming] 绘制栅格图 Canvas API
            
    
    博客分类: HTML5  

 

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>
        

 
[Pro HTML5 Programming] 绘制栅格图 Canvas API
            
    
    博客分类: HTML5  
 
 

 

  • [Pro HTML5 Programming] 绘制栅格图 Canvas API
            
    
    博客分类: HTML5  
  • 大小: 37.3 KB
  • [Pro HTML5 Programming] 绘制栅格图 Canvas API
            
    
    博客分类: HTML5  
  • 大小: 52.1 KB