如何使用畫布繪製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圈圈

回答

相關問題