使用圖像映射或畫布掩蓋圖像？

Question

好吧，我的問題是更好的視覺解釋：

我需要讓那些5個圖像容易更換，無需手動切割角度出圖像的客戶端，等等。所以我想象它本方法：

我創建PNG口罩藍條和藍色空間在他們之上。但圖像仍然在底部重疊，因爲它們都是方形的（參見最後一幅圖像）。有什麼辦法，在頁面加載時使用圖像映射（甚至是javascript）在方形圖像中剪切/遮蓋部分圖片？

感謝，

克里斯

Answer 1

我覺得你最好的辦法是用帆布除非我忘了用CSS3

<canvas id="image1" width="___" height="____"> 
</canvas> 

var people = [___]; 
var canvas = document.getElementById("image1"); 
var context = canvas.getContext("2d"); 
context.drawImage(people[0], x, y, width, height); 
context.beginPath(); 
context.moveTo(x, y); 
context.lineTo(x1, y1); 
context.lineTo(x2, y1); 
context.arcTo(x, y); 
context.clip(); 
context.closePath(); 

我可能搞砸了的東西但我要去這樣的事情

  (x, y)\__ 
     /  \__ 
     /   \__ 
(x2, y1)(_________________\(x1, y1) 

這是我最好的ASCII

這樣做將需要多個畫布元素繪製最左邊的比薩餅的方式。每個代表一個切片。原因是因爲裁剪將會擦除所有內容，除了路徑中的內容。

資源：

• MDN:clipping