0

長方形から円を引いたものを描く必要があります。円のクリッピングが不可能な場合は、多角形のクリッピング ゾーンで十分です。

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

4

3 に答える 3

1

キャンバス チュートリアルの合成を読む必要があります。四角形から円を引いたものや、同様の図形を描画する方法が説明されています。

私はあなたが探していると思いますdestination-out：

ここに画像の説明を入力

<!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-16T06:41:53.500 に答える
0

また、「クリップ」と「クリア」よりも使用できます。そんな感じ：

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

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

于 2011-08-16T12:02:41.297 に答える
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();

これ以上の解決策がないとは信じられません。しかし、それは私のニーズに合っています。

于 2011-08-16T16:05:53.353 に答える