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 回答