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;}

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

相關文章