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

-1

我想绘制圆圈，然后使该圆圈的4个部分相同，并在该不同部分填充不同的颜色。如何使用画布绘制HTML5中的1/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]

我都试过，但没有成功地达到了我的point.From上面的代码粘贴，我只是能画1/4 circle.I要画complate圈并做出circle.How等于4部分这可能吗？

来源

2014-09-03 HHG

那么你应该这样做。如果您遇到问题，您可以要求解决方案。但是，您的帖子中没有错误或问题描述。如果你有问题 - 发布！ – feeela 2014-09-03 09:38:10

你可以像下面这样做

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();

来源

2014-09-03 09:48:08

使用此代码只能绘制四分之一圆的一部分。我想绘制圆形的圆并使圆的四个部分相等。然后在那个不同的部分中填充衍色。如何有可能？ – HHG 2014-09-03 09:51:29

尝试从context.arc（500,250,200,1.5 * Math.PI，Math.PI，true）中移除'1.5 *'部分;'并在圆弧顶部绘制带有相同背景色的加号（+）。 – 2014-09-03 10:05:28

是你想要的：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; 
}

来源

2014-09-03 09:54:32 diEcho

你有一个良好的开端。这里是你的代码的一些想法：

绘图命令，如moveTo，lineTo和arc必须context.beginPath启动，否则以前的所有绘图命令将在“补”和“抚摸”重绘。您只能使用1种颜色每个beginPath方法填补，所以这就是为什么你做4套与调用beginPath开始绘制命令，这样就可以用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]，半径和起始末端弧度角绘制完整楔形。

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

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

来源

2014-09-03 16:00:42 markE

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

回答

相关问题