h5 画布canvas标签

妖狐艹你老母 2021-07-24 15:20 452阅读 0赞

画布
    	canvas标签,通过控制坐标在canvas上绘制图形
    		能够配合js实现非常复杂的动画效果
    			<canvas></canvas>	
    	
    	获得画笔(只能在js中使用)
    		对象.getContext("2d");
    		在js中，获得该对象后
    			var ctx=canvas.getContext("2d");  获得2d画笔
    	
    	绘画(无颜色)
    		矩形需要开始和结束的坐标
    			画笔.rect(0,0,30,30);
    	
    	填充绘画图形
    		填充矩形
    			画笔.fillRect(0,0,20,02);
    			
    
    	绘画只有边框的图形
    		绘画矩形边框
    			画笔对象.strokeRect(坐标);
    				ctx.strokeRect(20,20,40,40);
    				
    
    	
    	颜色
    		更改填充颜色(必须放在画笔填充之前)
    			画笔.fillStyle="颜色";
    		
    			ctx.fillStyle="yellow";
    			ctx.fillRect(0,20);
    
    		
    		改变边框颜色(在绘画边框之前使用)
    			ctx.strokeStyle="颜色";
    			
    			ctx.strokeStyle="green";
    	
    	给绘制图像添加阴影
    		画笔对象.shadowColor="颜色"
    		
    	阴影偏移
    		X方向偏移：画笔对象.shadowOffsetX="不带px的数字" 
    		Y方向偏移：画笔对象.shadowOffsetY="不带px的数字"
    	
    	设置阴影模糊级别
    		画笔对象.shadowBlur=级别数字;
    			ctx.shadowBlur=3;
    			
    	设置线性渐变色
    		var 渐变色对象可作为fillStyle和strokStyle的值
    		
    			活动渐变色对象同时设置线性渐变色的作用坐标
    				var colo=ctx.createLinearGradient(0,0,100,0); 设置水平方向的渐变色作用域
    				ctx.createLinearGradient(起始x,起始y,结束x,结束y)
    				通过坐标的方向和距离开始填充,y坐标不设置,则只会填充水平方向
    				 
    			添加渐变色颜色
    				colo.addColorStop(数字代表作用域,"颜色");
    					
    					var colo=ctx.createLinearGradient(0,0,0,100);
    					colo.addColorStop(0,"orange");
    					colo.addColorStop(0.5,"black");
    					colo.addColorStop(1,"white");
    					
    					ctx.fillStyle=colo;
    					ctx.fillRect(0,0,20,20);
    	
    	设置放射性渐变色
    		var 渐变色对象=画笔对象.createRadialGradient(圆心坐标)
    		
    				var fcolo=ctx.createRadialGradient(50,50,10,50,50,50)
    		
    		添加渐变色颜色
    			渐变色对象.addColorStop(数字作用域,"颜色");
    			
    				fcolo.addColorStop(0,"red");
    				fcolo.addColorStop(0.5,"blue");
    				fcolo.addColorStop(1,"green");
    			
    				ctx.fillStyle=fcolo;

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>canvas 容器</title>
    	</head>
    	<style type="text/css">
    			canvas{ 
    				background-color: red;
    			}
    	</style>
    	<script type="text/javascript">
    	function t1(){ 
    		var canvas=document.getElementById("showcanvas");
    		var ctx=canvas.getContext("2d");
    // ctx.rect(0,0,30,30)
    		
    		var colo=ctx.createLinearGradient(0,0,0,100);
    		var fcolo=ctx.createRadialGradient(50,50,10,50,50,50)
    		fcolo.addColorStop(0,"red");
    		fcolo.addColorStop(0.5,"blue");
    		fcolo.addColorStop(1,"green");
    		
    		
    		
    		colo.addColorStop(0,"orange");
    		colo.addColorStop(0.5,"black");
    		colo.addColorStop(1,"white");
    		ctx.shadowColor="blue";
    		ctx.shadowBlur=2;
    		ctx.shadowOffsetX="3";
    		ctx.shadowOffsetY="2";
    		
    		ctx.fillStyle=fcolo;
    		ctx.fillRect(0,0,80,80);
    		
    		ctx.strokeStyle="green"
    		ctx.strokeRect(20,20,40,40)
    		
    		
    	}
    	</script>
    
    	<body onload="t1()">
    		<canvas id="showcanvas"></canvas>
    	</body>
    </html>