以HTML5

我只是學習有關HTML5畫布的一些細節，並在進步，我想建立由楔子簡單色輪的色輪（在同一時間建立一個1度的楔形，並將其添加到360度）。但是，我得到的梯度一些奇怪的標記圖如下圖所示：以HTML5

wierd color marks 。

這裏是產生的colorwheel小提琴：http://jsfiddle.net/53JBM/

特別是，這是JS代碼：

var canvas = document.getElementById("picker"); 
var context = canvas.getContext("2d"); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 100; 
var counterClockwise = false; 

for(var angle=0; angle<=360; angle+=1){ 
    var startAngle = (angle-1)*Math.PI/180; 
    var endAngle = angle * Math.PI/180; 
    context.beginPath(); 
    context.moveTo(x, y); 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
    context.closePath(); 
    context.fillStyle = 'hsl('+angle+', 100%, 50%)'; 
    context.fill(); 
}

如果任何人都可以指出什麼我做錯了，或者有更好的方法來完成我試圖做到這一點，將不勝感激:)

來源

2013-08-16 FurtiveFelon

這是否足以給你，請檢查

var startAngle = (angle-2)*Math.PI/180;

來源

2013-08-16 04:36:18

你有任何想法，爲什麼這個工程和-1不？我很想知道其根本原因。 – FurtiveFelon

這似乎工作 – Markasoftware

您的繪圖弧。對？檢查你的弧線座標。 –

試試這個它看起來很棒。謝謝你的方式，這正是我想要做的。

var canvas = document.getElementById("picker"); 
 
var context = canvas.getContext("2d"); 
 
var x = canvas.width/2; 
 
var y = canvas.height/2; 
 
var radius = 100; 
 
var counterClockwise = false; 
 

 
for(var angle=0; angle<=360; angle+=1){ 
 
    var startAngle = (angle-2)*Math.PI/180; 
 
    var endAngle = angle * Math.PI/180; 
 
    context.beginPath(); 
 
    context.moveTo(x, y); 
 
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
 
    context.closePath(); 
 
    var gradient = context.createRadialGradient(x, y, 0, x, y, radius); 
 
\t gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)'); 
 
\t gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)'); 
 
    context.fillStyle = gradient; 
 
    context.fill(); 
 
}

<body> 
 
    <canvas id="picker"></canvas> 
 
</body>

來源

2015-04-04 22:21:12 shoo

回答

相關問題