Question

我很想知道如何在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();

现在要摘掉鼻屎，我很困惑。谁有借给我的人？谢谢！

Answer 1

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

如何在HTML5画布中制作这种形状？

1 个答案: