HTML的一个Canvas实例

绝地灬酷狼 2022-08-13 14:59 102阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>html5</title>
    	<script>
    		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);
    			//起点透明度设为50%的黑色
    			canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
    			//方向垂直向下，浙变色在很短的距离内迅速变到透明。
    			canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');
    			context.fillStyle=canopyShadow;
    			context.fillRect(-5,-50,10,50);
    			
    			//调用方法完成绘制树冠
    			createCanopyPath( context );
    			
    			//加宽线条
    			context.lineWidth=4;
    			//平滑路径的接合点
    			context.lineJoin='round';
    			//将颜色改成棕色
    			context.strokeStyle='#663300';
    			
    			context.stroke();
    			//将封闭的路径填充色设置为绿色并填充成树冠，注意这两句话放在  stroke()前和后面的效果不同。 
    			context.fillStyle='#339900';
    			context.fill();
    			
    			//使用transform()完成旋转，以实现阴影效果.
    			context.save();
    			
    			context.transform(1,0,-0.5,1,0,0);
    			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 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("diagonal");
    			var context=canvas.getContext("2d");
    			//在130,250位置绘制第一棵树
    			context.save();  //保存当前绘图状态
    			context.translate(150,210);
    			drawTree(context );
    			context.restore();
    			//在260,500的位置绘制第二棵树
    			context.save();
    			
    
    			/*
    			开始绘制一条林间小道
    			*/
    			context.save();  //保存当前绘图状态
    			context.translate(0,190);
    			context.beginPath();
    			//第一条曲线向右上方弯曲
    			context.moveTo(0,0);    //将坐标恢复到修正层的原点
    			//  前两个值代表控制点的 x,y坐标，后两个值代表终点的x, y值. 
    			context.quadraticCurveTo(170, -50,60,-90);
    			//第二条曲线向右下方弯曲
    			context.quadraticCurveTo(310,-250,410,-250);
    			//使用背景图替换线条
    			context.strokeStyle=context.createPattern(gravel, 'repeat');
    			context.lineWidth=15;
    			//会制当前路径
    			context.stroke();
    			context.restore();
    			
    			
    			//向右下方移动绘图上下文
    			context.translate(15,150);
    			//将第二棵树的宽和高分别放大至原来的2倍
    			context.scale(1.2,0.8);
    			drawTree(context);
    		    context.restore();
    		    
    		    /**
    		       在canvas上绘制标题文本
    		    */
    		    context.save();
    		    context.font="20px impact";
    		    context.fillStyle="#996600";
    		    context.textAlign="center";
    		    context.fillText("Happy Trails!",70,30,400);
    		   
    		   
    		    //给标题添加阴影效果
    		    context.shadowColor='rgba(255,0,0,0)';
    		    context.shadowOffsetX=50;
    		    context.shadowOffsetY=-10;
    		    
    		    context.shadowBlur=2;
    		   
    			context.restore();
    		    context.save();
    			
    		}
    		//加载砾石背景图
    		var gravel=new Image();
    		gravel.src="gravel.jpg";
    		gravel.οnlοad=function(){
    			drawTrails();
    		}
    		
    	</script>
    </head>
    
    <body>
        <h1>本案例演示了使用canvas文本操作，   context.fillText(text,x,y,maxwidth)   context.strokeText(text,x,y,maxwidth)</h1>
    	<canvas id="diagonal" style="border:1px solid;" width="200" height="200">
    	</canvas>
    </body>
    
    </html>