如何用HTML5画布绘制甜甜圈的区段？

正如标题所述。这可能吗？

编辑：当我说甜甜圈时，我的意思是顶视图，2D视图

是绘制一个圆圈的唯一选择，然后绘制一个较小的圆的段，具有相同的起点和较小的半径在顶部，背景颜色？如果这样做会是垃圾:(

解决方法

您可以通过使用两个弧形单个路径来实现。

你顺时针画一个圆，然后沿逆时针方向画一个第二个圆。我不会进入它的细节，但是路径的构造方式知道这是为了填补这部分路径的原因。更多的细节，你可以做什么this wiki article。

如果你正在绘制一个“框架”的矩形，这一点也是一样。您可以单方向(顺时针)绘制一个方块，然后以另一种方式(逆时针)绘制内盒以获得效果。

以下是甜甜圈的代码：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// Pay attention to my last argument!
//ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);  

ctx.beginPath()
ctx.arc(100,100,Math.PI*2,false); // outer (filled)
ctx.arc(100,55,true); // inner (unfills it)
ctx.fill();

例：

http://jsfiddle.net/Hnw6a/

仅绘制一个“段”可以通过使路径更小(您可能需要使用beziers而不是弧)或使用剪切区域来完成。这真的取决于你想要一个“段”

这里有一个例子：http://jsfiddle.net/Hnw6a/8/

// half doughnut
ctx.beginPath()
ctx.arc(100,Math.PI,true); // outer (unfills it)
ctx.fill();

原文地址：https://www.jb51.cc/html5/168970.html