1

これまでのところ、これを取得しました：http://jsfiddle.net/Lt7VN/

ここに画像の説明を入力

しかし、黒の四角形だけを切り取りたいのですが、赤と黒の両方の四角形を切り取り/クリップします。どうすればそれを行うことができますか?

context.beginPath();

context.rect(20,20,160,200);
context.fillStyle = "red";
context.fill();

context.beginPath();
context.rect(20,20,150,100);
context.fillStyle = "black";
context.fill();

context.globalCompositeOperation = "destination-out";

context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI);
context.fill();
4

2 に答える 2

1

合成を使用して、1 つのキャンバスでこれを行うことができます。

  • 黒い長方形を描く
  • 「消去」するdestination-outに合成を設定します
  • 円弧を描く (黒い四角形の一部を消去する)
  • 合成を「後ろに引く」目的地オーバーに設定します
  • 赤い四角形を描きます（アークカット四角形の後ろを埋めます。

ここに画像の説明を入力

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/F4dp3/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    context.save();

    context.beginPath();
    context.rect(20,20,150,100);
    context.fillStyle = "black";
    context.fill();

    context.globalCompositeOperation = "destination-out";

    context.beginPath();
    context.arc(100, 100, 50, 0, 2*Math.PI);
    context.fill();

    context.globalCompositeOperation = "destination-over";

    context.beginPath();
    context.rect(20,20,160,200);
    context.fillStyle = "red";
    context.fill();

    context.restore();

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-11-22T16:39:37.697 に答える
0

2つのキャンバスが私が信じている唯一の方法です http://jsfiddle.net/Lt7VN/2/

context1.globalCompositeOperation = 'destination-out';

context1.beginPath();
context1.arc(100, 100, 50, 0, 2*Math.PI);
context1.globalAlpha = 1.0;
context1.fill();
于 2013-11-22T16:20:08.053 に答える