Q

HTML5 Canvasのカスタムクリッピングゾーンを設定するにはどうすればよいですか？

2011-08-16 3 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();

しかし、アンチエイリアスはこのように機能しません。

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

難しかったです。

私が円を除いてすべての場所を描画することが分かっ最善の解決策は、よりよい解決策がないtaht私は信じることができない

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();

です。しかし、それは私の必要性のために働く。

2011-08-16 16:05:53 webshaker

+0

あなたは私の答えをお読みですか？ – Jonas

+0

はい、使用できません。私はもう一度やり直すつもりですが、私はかなり急いでいましたので、最初の作業ソリューションを使用しました;） – webshaker

関連する問題