帆布輪盤 - 使用背景圖像作爲每個切片

Question

我有一個用HTML5畫布創建的輪盤，目前每個切片是使用fillStyle(),beginPath(),stroke(),fill()方法生成的普通顏色。

我想使用適當切割切片形狀的圖像，但我不確定如何使用drawImage()來實現此功能。

這裏的

http://jsfiddle.net/pyD2q/2/

任何幫助或資源被讚賞的jsfiddle。

Answer 1

而不是填充顏色，你可以使用它作爲剪貼蒙版。對於每個弧線，設置剪輯，繪製圖像並重復。

像這樣（未經）：

for (i = 0; i < s.members.length; i++) { 
    angle = s.startAngle + i * s.arc; 

    ctx.beginPath(); 

    ctx.arc(s.width/2, s.height/2, s.outsideRadius, angle, angle + s.arc, false); 
    ctx.arc(s.width/2, s.height/2, s.insideRadius, angle + s.arc, angle, true); 

    ctx.save(); /// store current clip-state 
    ctx.clip(); /// set current arc as clipping mask 

    ctx.drawImage(someImageArray[i], x, y, width, height); 

    ctx.restore(); /// restore clip-state 
    ctx.stroke(); /// stroke arc 
} 

你當然也需要正確放置相對於部分，如果你要旋轉的圖像，你需要在這一點上它旋轉圖像。

在這方面，我會建議在離屏畫布上創建這個輪子。這樣，您只需將畫面外畫布繪製到旋轉的主畫布上，並且可以節省您計算每個角度的麻煩，並且性能會更好。