Html5 Canvas开发之插入图片、设置背景、渐变、文本、阴影

最新推荐文章于 2024-08-16 13:20:36 发布

子循

最新推荐文章于 2024-08-16 13:20:36 发布

阅读量4.1w

点赞数 3

本文链接：https://blog.csdn.net/Tsangyang/article/details/8202824

版权

Html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Canvas

4 篇文章 0 订阅

订阅专栏

1.插入图片

等图片加载完，再执行canvas操作

-图片预加载：在onload中调用

drawImage(olmg,x,y,w,h)

-olmg:当前图片x,y：坐标w,h：宽高

简单例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	var yImg = new Image();
	
	yImg.onload = function(){
		draw(this);
	};
	
	yImg.src = '2.png';
	
	function draw(obj){
		
		oGC.drawImage(obj,0,0);
		
	}
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

复杂例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	
	var aInput = document.getElementsByTagName('input');
	var oImg = document.getElementById('img1');
	
	var yImg = new Image();
	
	var iNow = 0;
	
	yImg.onload = function(){
		draw(oImg);
	};
	
	yImg.src = oImg.src;
	
	function draw(obj){
		
		var oC = document.createElement('canvas');
		var oGC = oC.getContext('2d');
		
		oC.width = obj.width;
		oC.height = obj.height;
		
		obj.parentNode.replaceChild(oC,obj);
		
		oGC.drawImage(obj,0,0);
		
		aInput[1].onclick = function(){
			
			if(iNow==3){
				iNow = 0;
			}
			else{
				iNow++;
			}
			toChange();
			
		};
		
		aInput[0].onclick = function(){
			
			if(iNow==0){
				iNow = 3;
			}
			else{
				iNow--;
			}
			toChange();
			
		};
		
		
		function toChange(){
			
			switch(iNow){
				case 1:
				
					oC.width = obj.height;
					oC.height = obj.width;
					oGC.rotate(90*Math.PI/180);
					oGC.drawImage(obj,0,-obj.height);
				
				break;
				
				case 2:
				
					oC.width = obj.width;
					oC.height = obj.height;
					oGC.rotate(180*Math.PI/180);
					oGC.drawImage(obj,-obj.width,-obj.height);
					
				break;
				
				case 3:
				
					oC.width = obj.height;
					oC.height = obj.width;
					oGC.rotate(270*Math.PI/180);
					oGC.drawImage(obj,-obj.width,0);
					
				break;
				
				case 0:
				
					oC.width = obj.width;
					oC.height = obj.height;
					oGC.rotate(0);
					oGC.drawImage(obj,0,0);
					
				break;
			}
			
		}
		
	}
	
	
};

</script>
</head>

<body>
<input type="button" value="←" />
<input type="button" value="→" />
<div>
	<img src="2.png" id="img1" />
</div>
</body>
</html>

设置背景：

createPattern(olmg,平铺方式)

-平铺参数为：repeat、repeat-x、repeat-y、no-repeat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	var yImg = new Image();
	
	yImg.onload = function(){
		draw(this);
	};
	
	yImg.src = '2.png';
	
	function draw(obj){
		
		var bg = oGC.createPattern(obj,'repeat');
		
		oGC.fillStyle = bg;
		
		oGC.fillRect(0,0,300,300);
		
	}
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

3.渐变

createLinearGradient(x1,y1,x2,y2)

-线性渐变：

-第一组参数：起始点坐标、第二组参数：结束点坐标

-addColorStop(位置、颜色)添加渐变点

createRadialGradient(x1,y1,r1,x2,y2,r2)

-放射性渐变：

-参数：第一个圆的坐标和半径，第二个圆的坐标和半径

线性渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	var obj = oGC.createLinearGradient(150,100,250,200);
	
	obj.addColorStop(0,'red');
	obj.addColorStop(0.5,'yellow');
	obj.addColorStop(1,'blue');
	
	oGC.fillStyle = obj;
	
	oGC.fillRect(150,100,100,100);
	
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

放射性渐变：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	var obj = oGC.createRadialGradient(200,200,100,200,200,150);
	
	obj.addColorStop(0,'red');
	obj.addColorStop(0.5,'yellow');
	obj.addColorStop(1,'blue');
	
	oGC.fillStyle = obj;
	
	oGC.fillRect(0,0,oC.width,oC.height);
	
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

4.文本

stokeText(文字,x,y)

-文字边框

fillText(文字,x,y)

-文字填充

font

-文字大小：‘60px impact’

textAlign

-默认是start跟left一样的效果 end right center

textBaseline

-文字上下的位置的方式默认：alphabetic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	oGC.font = '60px impact';
	
	oGC.textBaseline = 'top';  //middle bottom
	
	oGC.fillText('妙味课堂',0,0);
	
	
	oGC.strokeText('妙味课堂',0,200);
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

measureText()

-measureText(str).width:只有宽度，没有高度

例：文字居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	oGC.font = '60px impact';
	
	oGC.textBaseline = 'top';  //middle bottom
	
	var w = oGC.measureText('妙味课堂').width;
	
	oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

5.阴影

shadowOffsetX、shadowOffsetY

-x轴偏移、y轴偏移

shadowBlur

-高斯模糊值

shadowColor

-阴影颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>


window.onload = function(){
	var oC =document.getElementById('c1');
	var oGC = oC.getContext('2d');
	
	oGC.font = '60px impact';
	
	oGC.textBaseline = 'top';  //middle bottom
	
	oGC.shadowOffsetX = 10;
	oGC.shadowOffsetY = 10;
	oGC.shadowBlur = 3;
	
	//alert(oGC.shadowColor);  //默认颜色：黑色透明
	
	oGC.shadowColor = 'yellow';
	
	var w = oGC.measureText('妙味课堂').width;
	
	oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);
	
};


</script>
</head>


<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>