Q

如何爲HTML5 Canvas設置自定義裁剪區域？

2011-08-16 112 views 0 likes

0

我需要畫一個矩形減去一個圓。如果無法進行圓形裁剪，多邊形裁剪區域可能足以滿足我的需要。如何爲HTML5 Canvas設置自定義裁剪區域？

如何爲HTML5 Canvas設置自定義裁剪區域？

2011-08-16 webshaker

+0

嘿看看堆棧溢出這個問題，如果它可以幫助你Clipping circles on Canvas – Shadow

+0

yeap。它接近我正在尋找的東西。除了我沒有成功地追蹤圈子的邊界，並且我正在尋找排除不保留它的圈子！ – webshaker

A

回答

1

您應該在Canvas教程中閱讀Compositing，它解釋瞭如何繪製一個矩形減去一個圓和類似的數字。

我認爲你正在尋找destination-out：

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
<script> 
window.onload = function() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.fillStyle = "#09f"; 
    ctx.fillRect(15,15,70,70); 

    ctx.globalCompositeOperation = 'destination-out'; 

    ctx.fillStyle = "#f30"; 
    ctx.beginPath(); 
    ctx.arc(75,75,35,0,Math.PI*2,true); 
    ctx.fill(); 
} 
</script> 
</head> 
<body> 
<canvas id="canvas" width="400" height="300"/> 
</body> 
</html>

看到它在行動上jsFiddle。

2011-08-16 06:41:53 Jonas

0

此外，您可以使用「剪輯」，而不是「清除」。類似的東西：

drawRectangle(ctx); 
walkCirclePath(ctx); 
ctx.clip(); 
ctx.clear();

但antialiasing不工作在這種方式;

2011-08-16 12:02:41 Shock

+0

[canvas context]沒有clear（）函數（http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d -measuretext）。但剪輯應該可以正常工作。 – revers

+0

對不起，我的意思是clearRect – Shock

0

好吧。這很難。

我發現畫的每一個地方，除了在一個圓圈最好的解決辦法是

c.save(); 
c.beginPath(); 
c.moveTo(0, 0); 
c.lineTo(x, 0); 
c.arc(x, y, 75, - Math.PI/2, Math.PI * 2 - Math.PI/2, 1); 
c.lineTo(x, 0); 
c.lineTo(1000, 0); 
c.lineTo(1000, 500); 
c.lineTo(0, 500); 
c.clip(); 
c.drawImage(window.tBitmap[0], x - 100, y - 100); 
c.restore();

我不能相信taht沒有更好的解決辦法。但它適用於我的需要。

2011-08-16 16:05:53 webshaker

+0

你讀過我的回答了嗎？ – Jonas

+0

是的，但我沒有成功使用它。我會再試一次，但我很急，所以我使用了第一個工作解決方案;） – webshaker

相關問題