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

【问题标题】：How would one make this shape in an HTML5 canvas?如何在 HTML5 画布中制作这种形状？
【发布时间】：2011-04-12 07:21:19
【问题描述】：

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

现在要修剪鼻屎，我很困惑。谁能帮我一把？谢谢！

【问题讨论】：

标签： html canvas crop geometry shape

【解决方案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()

【讨论】：