canvas globalCompositeOperation 屬性

admin發表於2019-08-30
Canvas

此屬性設定或返回如何將一個源（新的）影象繪製到目標（已有的）的影象上。

（1）.源影象：您打算放置到畫布上的繪圖。

（2）.目標影象：您已經放置在畫布上的繪圖。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.globalCompositeOperation="source-in";

屬性值說明：

（1）.source-over：預設，在目標影象上顯示源影象。

（2）.source-atop：在目標影象頂部顯示源影象。源影象位於目標影象之外的部分是不可見的。

（3）.source-in：在目標影象中顯示源影象。只有目標影象之內的源影象部分會顯示，目標影象是透明的。

（4）.source-out：在目標影象之外顯示源影象。只有目標影象之外的源影象部分會顯示，目標影象是透明的。

（5）.destination-over：在源影象上顯示目標影象。

（6）.destination-atop：在源影象頂部顯示目標影象。目標影象位於源影象之外的部分是不可見的。

（7）.destination-in：在源影象中顯示目標影象。只有源影象之內的目標影象部分會被顯示，源影象是透明的。

（8）.destination-out：在源影象之外顯示目標影象。只有源影象之外的目標影象部分會被顯示，源影象透明。

（9）.lighter：顯示源影象 + 目標影象。

（10）.copy：顯示源影象，忽略目標影象。

（11）.xor：使用異或操作對源影象與目標影象進行組合。

屬性值具體表現如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/30/121152oq12pa5pypa2pnn3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

瀏覽器相容:

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.Safari瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  ctx.fillStyle="red";
  ctx.fillRect(20,20,75,50);
  ctx.fillStyle="blue";        
  ctx.globalCompositeOperation="source-over";
  ctx.fillRect(50,50,75,50);        
  ctx.fillStyle="red";
  ctx.fillRect(150,20,75,50);
  ctx.fillStyle="blue";        
  ctx.globalCompositeOperation="destination-over";
  ctx.fillRect(180,50,75,50);
}
</script>
</head>
<body>
  <canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/30/120605juto1at8ojese79e.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

非常簡單的效果，可以對照前面的屬性值作用觀察具體表現。

相關文章