2

HTML5 Canvasで、以下のような形状をどのように作成して作成するのでしょうか。それは多かれ少なかれトリミングされた円だと思いますが、私の必要性はそれを同期を変えるでしょう。

http://img826.imageshack.us/img826/5198/98359410.jpg

context.fillStyle = "#000";
context.beginPath();
context.arc(200,200,100,0,Math.PI*2,true);
context.closePath();
context.fill();

今、ブーガーを収穫するために、私は当惑しています。誰かが私に手を貸してくれませんか？ありがとう！

4

1 に答える 1

4 
context.globalCompositeOperation = 'destination-in';

context.fillRect(200, 220, 200, 100); //Or something similar

destination-inつまり、 MDCごとに：既存のキャンバスコンテンツは、新しい形状と既存のキャンバスコンテンツの両方が重なる場所に保持されます。他のすべては透明になります。

または逆に

context.fillRect(200, 220, 200, 100);

context.globalCompositeOperation = 'source-in';

//Draw arc...

source-inつまり、新しいシェイプは、新しいシェイプとデスティネーションキャンバスの両方が重なる場所にのみ描画されます。他のすべては透明になります

これらの方法は両方とも、すでにキャンバスに描画されている他のコンテンツを混乱させることになります。これが問題である場合は、clip

context.save();
context.beginPath();

//Draw rectangular path
context.moveTo(200, 220);
context.lineTo(400, 220);
context.lineTo(400, 320);
context.lineTo(200, 320);
context.lineTo(200, 220);

//Use current path as clipping region
context.clip();

//Draw arc...

//Restore original clipping region, likely the full canvas area
context.restore()
于 2010-09-14T18:03:22.033 に答える