HTML5之canvas 9绘制图片 图片平铺 图片裁剪

绘制图片

Var image=new Image();

image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”;

image.onload=function(){}

Context.drawImage(image,x,y);

Context.drawImage(image,x,y,w,h);

Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);

图片平铺

Var pat= context.createPattern(image,”repeat”);

Context.fillStyle=pat;

Context.fillRect(0,0,400,300);

图片裁剪

 

先绘制好路径

 

Context.clip();

绘制图片代码

<html>

	<head>
		<meta charset="UTF-8">
		<title>绘制图片</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

	</head>

	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		
		<script type="text/javascript">
			var oCanvas = document.getElementById("canvas");
			var context = oCanvas.getContext("2d");
			context.fillStyle = "#ededed";
			context.fillRect(0, 0, 500, 500);

			//绘制图片
			var img = new Image(); //创建
			img.src = "img/01.jpg"; //图片地址
			img.onload = function() { //检测所有图像信息载入页面里
				context.drawImage(img, 0, 0); // img对象;0,0:img坐标起点
			};
		</script>
	</body>

</html>

　　

 图片平铺代码

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>图片平铺</title>
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8 
 9     </head>
10 
11     <body>
12         <canvas id="canvas" width="500" height="500"></canvas>
13         <script type="text/javascript">
14             var oCanvas = document.getElementById("canvas");
15             var context = oCanvas.getContext("2d");
16             context.fillStyle = "#ededed";
17             context.fillRect(0, 0, 500, 500);
18             //平铺
19 
20             var img = new Image(); //创建
21             img.src = "01.jpg"; //图片地址
22             img.onload = function() {
23                 var pat = context.createPattern(img, "repeat");
24                 context.fillStyle = pat;
25                 context.fillRect(0, 0, 500, 500);
26             }
27         </script>
28     </body>
29 
30 </html>

图片裁剪代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片裁剪</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		<script type="text/javascript">
			var oCanvas = document.getElementById("canvas");
			var context = oCanvas.getContext("2d");
			context.fillStyle = "#ededed";
			context.fillRect(0, 0, 500, 500);
			
			
			var img = new Image(); //创建
			img.src = "04.jpg"; //图片地址
			img.onload = function() { //检测所有图像信息载入页面里
//				context.arc(100,100,60,0,2*Math.PI); //画圆
				context.fillRect(100,100,40,40);
				context.strokeRect(100,100,40,40);
				context.clip();//裁
				context.drawImage(img,40,40);//
			};
		</script>
	</body>
</html>

　　

posted @ 2016-09-06 13:13  李大白程序员  阅读(2275)  评论(0)    收藏  举报