瀹氫箟鍜岀敤娉?/h2>
getImageData() 鏂规硶杩斿洖 ImageData 瀵硅薄锛岃?瀵硅薄鎷疯礉浜嗙敾甯冩寚瀹氱煩褰㈢殑鍍忕礌鏁版嵁銆?/p>
瀵逛簬 ImageData 瀵硅薄涓?殑姣忎釜鍍忕礌锛岄兘瀛樺湪鐫?洓鏂归潰鐨勪俊鎭?紝鍗?RGBA 鍊硷細
- R - 绾㈣壊 (0-255)
- G - 缁胯壊 (0-255)
- B - 钃濊壊 (0-255)
- A - alpha 閫氶亾 (0-255; 0 鏄??鏄庣殑锛?55 鏄?畬鍏ㄥ彲瑙佺殑)
color/alpha 浠ユ暟缁勫舰寮忓瓨鍦?紝骞跺瓨鍌ㄤ簬 ImageData 瀵硅薄鐨劼?a title="HTML canvas data 灞炴? href="http://www.w3school.com.cn/html5/canvas_imagedata_data.asp" style="margin: 0px; padding: 0px; border: 0px; text-decoration: underline; color: #900b09; background-color: transparent;">data聽灞炴?涓??/p>
鎻愮ず锛氬湪鎿嶄綔瀹屾垚鏁扮粍涓?殑 color/alpha 淇℃伅涔嬪悗锛屾偍鍙?互浣跨敤聽putImageData()聽鏂规硶灏嗗浘鍍忔暟鎹?嫹璐濆洖鐢诲竷涓娿?/p>
渚嬪瓙锛?/h3>
浠ヤ笅浠ｇ爜鍙?幏寰楄?杩斿洖鐨?ImageData 瀵硅薄涓??涓?釜鍍忕礌鐨?color/alpha 淇℃伅锛?/p>
red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3];
浜茶嚜璇曚竴璇?/a>
鎻愮ず锛氭偍涔熷彲浠ヤ娇鐢?getImageData() 鏂规硶鏉ュ弽杞?敾甯冧笂鏌愪釜鍥惧儚鐨勬瘡涓?儚绱犵殑棰滆壊銆?/p>
浣跨敤璇ュ叕寮忛亶鍘嗘墍鏈夌殑鍍忕礌锛屽苟鏀瑰彉鍏堕?鑹插?锛?/p>
red=255-old_red; green=255-old_green; blue=255-old_blue;
锛堣?瑙佷笅闈㈢殑鈥滀翰鑷?瘯涓?瘯鈥濆疄渚嬨?锛?/p>
JavaScript 璇?硶
var imgData=context.getImageData(x,y,width,height);//鍦ㄦ寚瀹氱殑鍖哄煙鍙栧洖鍍忕礌
鍙傛暟鍊?/h3>
| x | 寮??澶嶅埗鐨勫乏涓婅?浣嶇疆鐨?x 鍧愭爣銆?/td> |
| y | 寮??澶嶅埗鐨勫乏涓婅?浣嶇疆鐨?y 鍧愭爣銆?/td> |
| width | 灏嗚?澶嶅埗鐨勭煩褰㈠尯鍩熺殑瀹藉害銆?/td> |
| height | 灏嗚?澶嶅埗鐨勭煩褰㈠尯鍩熺殑楂樺害銆?/td> |
聽
聽
瀹氫箟鍜岀敤娉?/h2>
putImageData() 鏂规硶灏嗗浘鍍忔暟鎹?紙浠庢寚瀹氱殑 ImageData 瀵硅薄锛夋斁鍥炵敾甯冧笂銆?/p>
鎻愮ず锛氳?鍙傞槄聽getImageData()聽鏂规硶锛屽畠鍙??鍒剁敾甯冧笂鎸囧畾鐨勭煩褰㈢殑鍍忕礌鏁版嵁銆?/p>
鎻愮ず锛氳?鍙傞槄聽createImageData()聽鏂规硶锛屽畠鍙?垱寤烘柊鐨勭┖鐧?ImageData 瀵硅薄銆?/p>
JavaScript 璇?硶锛?/h3>
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);涓巊etImageData鏄??搴旂殑
鍙傛暟鍊?/h3>
| imgData | 瑙勫畾瑕佹斁鍥炵敾甯冪殑 ImageData 瀵硅薄銆?/td> |
| x | ImageData 瀵硅薄宸︿笂瑙掔殑 x 鍧愭爣锛屼互鍍忕礌璁°?/td> |
| y | ImageData 瀵硅薄宸︿笂瑙掔殑 y 鍧愭爣锛屼互鍍忕礌璁°?/td> |
| dirtyX | 鍙??銆傛按骞冲?锛坸锛夛紝浠ュ儚绱犺?锛屽湪鐢诲竷涓婃斁缃?浘鍍忕殑浣嶇疆銆?/td> |
| dirtyY | 鍙??銆傛按骞冲?锛坹锛夛紝浠ュ儚绱犺?锛屽湪鐢诲竷涓婃斁缃?浘鍍忕殑浣嶇疆銆?/td> |
| dirtyWidth | 鍙??銆傚湪鐢诲竷涓婄粯鍒跺浘鍍忔墍浣跨敤鐨勫?搴︺?/td> |
| dirtyHeight | 鍙??銆傚湪鐢诲竷涓婄粯鍒跺浘鍍忔墍浣跨敤鐨勯珮搴︺?/td> |
聽
聽
聽
瀹氫箟鍜岀敤娉?/h2>
globalAlpha 灞炴?璁剧疆鎴栬繑鍥炵粯鍥剧殑褰撳墠閫忔槑鍊硷紙alpha 鎴?transparency锛夈?/p>
globalAlpha 灞炴?鍊煎繀椤绘槸浠嬩簬 0.0锛堝畬鍏ㄩ?鏄庯?涓?1.0锛堜笉閫忔槑锛?涔嬮棿鐨勬暟瀛椼?/p>
| 1.0 |
| context.globalAlpha=number;//璁剧疆閫忔槑搴?/td> |
灞炴?鍊?/h3>
| number | 閫忔槑鍊笺?蹇呴』浠嬩?0.0锛堝畬鍏ㄩ?鏄庯?涓?1.0锛堜笉閫忔槑锛?涔嬮棿銆?/td> |
聽
瀹炰緥
棣栧厛锛岀粯鍒朵竴涓?孩鑹茬殑鐭╁舰锛岀劧鍚庡皢閫忔槑搴?(globalAlpha) 璁剧疆涓?0.2锛岀劧鍚庡啀缁樺埗涓?釜缁胯壊鍜屼竴涓?摑鑹茬殑鐭╁舰锛?/p>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// 璋冭妭閫忔槑搴?
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
聽
聽
聽
聽
聽
瀹氫箟鍜岀敤娉?/h2>
globalCompositeOperation 灞炴?璁剧疆鎴栬繑鍥炲?浣曞皢涓?釜婧愶紙鏂扮殑锛夊浘鍍忕粯鍒跺埌鐩?爣锛堝凡鏈夛級鐨勫浘鍍忎笂銆?/p>
婧愬浘鍍?= 鎮ㄦ墦绠楁斁缃?埌鐢诲竷涓婄殑缁樺浘銆?/p>
鐩?爣鍥惧儚 = 鎮ㄥ凡缁忔斁缃?湪鐢诲竷涓婄殑缁樺浘銆?/p>
| source-over |
| context.globalCompositeOperation="source-in"; |
灞炴?鍊?/h3>
| source-over | 榛樿?銆傚湪鐩?爣鍥惧儚涓婃樉绀烘簮鍥惧儚銆?/td> |
| source-atop | 鍦ㄧ洰鏍囧浘鍍忛《閮ㄦ樉绀烘簮鍥惧儚銆傛簮鍥惧儚浣嶄簬鐩?爣鍥惧儚涔嬪?鐨勯儴鍒嗘槸涓嶅彲瑙佺殑銆?/td> |
| source-in | 鍦ㄧ洰鏍囧浘鍍忎腑鏄剧ず婧愬浘鍍忋?鍙?湁鐩?爣鍥惧儚鍐呯殑婧愬浘鍍忛儴鍒嗕細鏄剧ず锛岀洰鏍囧浘鍍忔槸閫忔槑鐨勩?/td> |
| source-out | 鍦ㄧ洰鏍囧浘鍍忎箣澶栨樉绀烘簮鍥惧儚銆傚彧浼氭樉绀虹洰鏍囧浘鍍忎箣澶栨簮鍥惧儚閮ㄥ垎锛岀洰鏍囧浘鍍忔槸閫忔槑鐨勩?/td> |
| destination-over | 鍦ㄦ簮鍥惧儚涓婃柟鏄剧ず鐩?爣鍥惧儚銆?/td> |
| destination-atop | 鍦ㄦ簮鍥惧儚椤堕儴鏄剧ず鐩?爣鍥惧儚銆傛簮鍥惧儚涔嬪?鐨勭洰鏍囧浘鍍忛儴鍒嗕笉浼氳?鏄剧ず銆?/td> |
| destination-in | 鍦ㄦ簮鍥惧儚涓?樉绀虹洰鏍囧浘鍍忋?鍙?湁婧愬浘鍍忓唴鐨勭洰鏍囧浘鍍忛儴鍒嗕細琚?樉绀猴紝婧愬浘鍍忔槸閫忔槑鐨勩?/td> |
| destination-out | 鍦ㄦ簮鍥惧儚澶栨樉绀虹洰鏍囧浘鍍忋?鍙?湁婧愬浘鍍忓?鐨勭洰鏍囧浘鍍忛儴鍒嗕細琚?樉绀猴紝婧愬浘鍍忔槸閫忔槑鐨勩?/td> |
| lighter | 鏄剧ず婧愬浘鍍?+ 鐩?爣鍥惧儚銆?/td> |
| copy | 鏄剧ず婧愬浘鍍忋?蹇界暐鐩?爣鍥惧儚銆?/td> |
| source-over | 浣跨敤寮傛垨鎿嶄綔瀵规簮鍥惧儚涓庣洰鏍囧浘鍍忚繘琛岀粍鍚堛?/td> |
聽
聽var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
聽