【HTML】Canvas(3)-繪製圖片

阿新 • • 發佈：2019-01-18

開發遊戲的時候，遊戲中的地圖、背景、任務、物品等都是由圖片組成的，這次我們來談談在canvas中如何操作圖片吧。

canvas中提供了drawImage函式和putImageData函式來繪製圖片。

drawImage()函式有3種函式原型，語法如下：

drawImage(image,dx,dy);

drawImage(image,dx,dy,dw,dh);

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

引數一image是要繪製的物件，這個引數可以是HTMLImageELement、HTMLCanvasElement、HTMLVideoElement,

dx,dy是image在canvas中定位的座標值，

dw,dh表示image在canvas中即將繪製的區域（相對dx和dy座標的偏移量）的寬度和高度值，

sx,sy是image所要繪製的起始位置，

sw,sh是image所要繪製的區域（相對image的sx和sy座標的偏移量）的寬度和高度值

先準備好HTML部分：

<body>
	img標籤<br/>
	<img src="../images/travel.jpg" id="travel" alt="travel" title="travel"/><br/>
	<br/><br/>
	canvas畫板<br/>
	<!-- PS:畫板要設定寬高值，且要不能小於原圖，否則圖片會顯示不完整 -->
    <canvas id="mycanvas" width="500" height="500">		
    	你的瀏覽器不支援HTML5
    </canvas>
</body>

Javascript部分：

方法一：通過<img>標籤來獲取

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	//獲取圖片id,取得圖片資料
	var img=document.getElementById('travel');
	//用drawImage()函式將圖片繪製到畫板上
	ctx.drawImage(img,0,0);

方法二：通過javascript的Image物件來獲取

先建立一個Image物件，然後通過設定src屬性來載入圖片，接著新增onload事件偵聽，當圖片載入完成時將其繪製到畫板上。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var img=new Image();
	img.src='../images/travel.jpg';
	img.onload=function(){
		ctx.drawImage(img,0,0);
	};

我們來具體看下drawImage函式的3種函式原型的用法和區別：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');
	var image=new Image();
	image.src='../images/travel.jpg';
	image.onload=function(){
		//表示從座標(0,0)開始繪製整張圖片
		ctx.drawImage(image,0,0);

		//表示從座標(200,0)開始繪製整張圖片到長100，寬100的矩形區域內
		ctx.drawImage(image,200,0,100,100);

		//表示擷取圖片從(50,50)到(100,80)的部分，從座標(200,110)開始繪製放到長100，寬60的矩形區域內
		ctx.drawImage(image,50,50,100,80,200,110,100,60);
	};

還有一種繪製圖片的方法，就是利用getImageData和putImageData繪製圖片：

putImageData(imgdata,dx,dy,sx,sy,sw,sh)函式的7個引數中，imgdata是畫素資料，dx,dy是繪製圖片的定位座標值，sx,sy是imgdata所要繪製圖片的其實位置，sw,sh是imgdata所要繪製區域（相對imgdata的sx,sy座標的偏移量）的寬度和高度值。後4個引數可以省略，此時表示繪製整個imgdata

在使用putImageData()前，需先用getImageData(x,y,w,h)函式得到畫素資料，即從canvas畫板上取得所選區域的畫素資料，它的4個引數分別是：選擇區域七點的座標x和座標y，選擇區域的長和寬。

putImageData(imagedata,dx,dy,x,y,w,h)函式則表示將所得到的畫素資料描畫到canvas畫板上形成圖形。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var image=new Image();
	image.src='../images/travel.jpg';
	image.onload=function(){
		ctx.drawImage(image,0,0);
		var imgData=ctx.getImageData(50,50,192,168);
		ctx.putImageData(imgData,200,260);
		ctx.putImageData(imgData,200,260,50,50,100,100);
	};

注：使用getImageData函式獲取圖片資料，此函式在chrome，Firefox，ie等瀏覽器中會涉及跨域問題，所以無法直接在瀏覽器中瀏覽，必須通過伺服器來訪問測試。

Author:致知

Sign:路漫漫其修遠兮，吾將上下而求索。

附：

【HTML】Canvas(3)-繪製圖片

【HTML】Canvas(3)-繪製圖片

【HTML】設定全屏圖片

【Python】2.3繪製等邊三角形

【筆記】canvas圖片預加載及進度條的實現

【HTML】向網頁<Title></Title>中插入圖片以及跑馬燈

【html】使用img標籤和背景圖片之間的區別

【html】使用img標簽和背景圖片之間的區別

【ES】學習3-請求體查詢

【html】點擊鏈接讓頁面在 iframe 中變換

【HTML】---HTML語義化

【c#】winform 上傳圖片

【轉】 cocos2dx 3.x C++搭建protobuf環境

【HTML】瀏覽器內核控制meta name="renderer" 說明文檔

【HTML】Http分段下載詳解

【html】HTML的布局標簽

【html】01_html的介紹

【html】

【HTML】百度地圖webAPI使用

【DFS】CCF201512-3畫圖

【HTML】div居中顯示

【HTML】Canvas(3)-繪製圖片

相關推薦