Question

我想绘制圆圈，然后将该圆圈平均分成4个部分，并在不同的部分填充不同的颜色。

context.moveTo(500, 250);
context.lineTo(500, 50);
context.moveTo(500, 250);
context.arc(500,250,200,0,(Math.PI)+(Math.PI/2),false);![][1]`][1]

我已经尝试但没有成功达到我的观点。从上面的代码粘贴，我只能画出1/4圈。我想绘制比较圆并使该圆的4个部分相等。如何可能？

Answer 1

你有个好的开始。以下是您的代码的一些想法：

moveTo，lineTo和arc等绘图命令必须以context.beginPath开头，否则所有先前的绘图命令都会在'fill'和'stroke'中重绘。每个beginPath只能填充1种颜色，这就是为什么从beginPath开始执行4组绘图命令非常重要，这样就可以填充4种不同的颜色：

// begin a new set of drawing commands
// (or else all previous commands will be redrawn also)
context.beginPath();

context.moveTo(500, 250);
context.lineTo(500, 50);
context.moveTo(500, 250);
context.arc(500,250,200,0,(Math.PI)+(Math.PI/2),false);

顺便说一句，您可以使用绘图命令的每个部分自动连接一条线来简化楔形的绘制。此代码将使用中心点[cx，cy]，半径和起始＆amp;节点绘制完整的楔形。结束弧度角。

context.beginPath();
context.moveTo(cx,cy);
context.arc(cx,cy,radius,startAngle,endAngle);
context.closePath();
context.fill();

演示：http://jsfiddle.net/m1erickson/nyakoof2/

Answer 2

你可以这样做

context.moveTo(500, 50);
context.lineTo(500, 250);
context.arc(500,250,200,1.5*Math.PI,Math.PI,true);
context.lineTo(500,250);
context.stroke();

Answer 3

是你想要的：Working Demo

div#semi {
        width:300px;
        min-height: 300px;
        border: 1px solid transparent;
        border-radius: 300px 0 0 0px; /* depends on width */
        border-color: blue red red blue;
}

如何使用画布在HTML5中绘制1/4圈

3 个答案: