如何用HTML5 canvas绘制甜甜圈的片段? [英] How to draw segment of a donut with HTML5 canvas?

问题描述

如标题所述.这可能吗?

As the title states. Is this possible?

编辑:当我说甜甜圈"时，是指2D顶视图

When i say doughnut I mean a top, 2D view

唯一的选择是绘制一个圆的段，然后在背景的顶部绘制一个具有相同原点和半径较小的较小圆的段吗?如果这样的话，那真是胡扯:(

Is the only option to draw a segment of a circle, then draw a segment of a smaller circle with the same origin and smaller radius over the top, with the colour of the background? That would be crap if so :(

推荐答案

您可以通过创建具有两个弧的单个路径来实现.

You do it by making a single path with two arcs.

您顺时针绘制一个圆，然后逆时针绘制第二个圆.我不会详细介绍它，但是路径的构造方式知道将其作为取消填充该部分路径的原因.有关其操作的更多详细信息，您可以此Wiki文章.

You draw one circle clockwise, then draw a second circle going counter-clockwise. I won't go into the detail of it, but the way paths are constructed knows to take this as a reason to un-fill that part of the path. For more detail of what its doing you can this wiki article.

如果您正在绘制带框"的矩形，则同样可以.您可以以一种方式(顺时针)绘制一个盒子，然后以另一种方式(逆时针)绘制内部的盒子来获得效果.

The same would work if you were drawing a "framed" rectangle. You draw a box one way (clockwise), then draw the inner box the other way (counter-clockwise) to get the effect.

这是甜甜圈的代码:

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/

通过绘制较小的路径(可能需要使用贝塞尔曲线而不是圆弧)或使用剪切区域，可以仅绘制其分段".这实际上取决于您要细分"的精确程度

Drawing only a "segment" of it can be done by making the path smaller (you might need to use beziers instead of arc), or by using a clipping region. It really depends on how exactly you want a "segment"

这里是一个示例: 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();

这篇关于如何用HTML5 canvas绘制甜甜圈的片段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！