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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM