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

Question

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

编辑:当我说甜甜圈时,我指的是一个顶级的2D视图

是绘制圆的一个圆的唯一选项,然后绘制一个较小的圆的一段,其中相同的原点和较小的半径在顶部,与背景的颜色？如果是这样,那将是废话:(

Answer 1

你可以通过制作一个带有两个弧的单一路径来实现.

顺时针绘制一个圆,然后逆时针绘制第二个圆.我不会详细介绍它,但是构建路径的方式知道将其作为解开路径部分的理由.有关它的功能的更多详细信息,请参阅此Wiki文章.

如果您正在绘制"框架"矩形,则同样适用.你单向绘制一个方框(顺时针方向),然后以另一种方式(逆时针方向)绘制内盒以获得效果.

这是甜甜圈的代码:

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,100,0,Math.PI*2, false); // outer (filled)
ctx.arc(100,100,55,0,Math.PI*2, true); // inner (unfills it)
ctx.fill();

例:

http://jsfiddle.net/Hnw6a/

只绘制它的"段"可以通过使路径更小(您可能需要使用贝塞尔而不是弧)或使用剪切区域来完成.这真的取决于你想要一个"细分"的确切程度

这是一个例子:http://jsfiddle.net/Hnw6a/8/

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