HTML5畫布 - 繪製一個圓內的線路在特定的角度

Question

的Javascript

var canvas = document.getElementById("mycanvas"); 
draw(canvas); 

function draw(canvas){ 
    var context = canvas.getContext('2d'), centerX = Math.floor(canvas.width/2), centerY = Math.floor(canvas.height/2),radius = Math.floor(canvas.width/2); 
    context.lineWidth = 1; 
    context.strokeStyle = 'black'; 
    var begin = 0; interval = 90; 
    var arcSize= degreesToRadians(interval); 
    for(var startingAngle=begin; startingAngle < 360;){ 
     context.beginPath(); 
     context.moveTo(centerX, centerY); 
     context.arc(centerX, centerY, radius, degreesToRadians(startingAngle), startingAngle + arcSize, false); 
     context.closePath(); 
     context.stroke(); 
     startingAngle = startingAngle + interval; 
    } 
    lineAtAngle(context,centerX,centerY,radius,30); 
} 

function degreesToRadians(degrees) { 
    return (degrees * Math.PI)/180; 
} 

function lineAtAngle(context,x1, y1, length, angle) { 
    context.beginPath(); 
    context.moveTo(x1, y1); 
    context.lineTo(x1 + length * degreesToRadians(angle), y1 + length * degreesToRadians(angle)); 
    context.strokeStyle = 'red'; 
    context.closePath(); 
    context.stroke(); 
} 

HTML

<canvas id="mycanvas" width="400" height="400"></canvas> 

JSFiddle

我想實現 傳遞角度的價值在哪需要繪製紅線，並且應該以該角度繪製。

Answer 1

我設法用下面的代碼來實現它。有點哈克，但它的作品。不知道爲什麼我需要將角度乘以-1。

var canvas = document.getElementById("mycanvas"); 
draw(canvas, 167); 



function draw(canvas, angle){ 
    var context = canvas.getContext('2d'), centerX = Math.floor(canvas.width/2), centerY = Math.floor(canvas.height/2),radius = Math.floor(canvas.width/2); 
    context.lineWidth = 1; 
    context.strokeStyle = 'red'; 
    var begin = 0; interval = 90; 
    var arcSize= degreesToRadians(interval); 
    context.beginPath(); 
    context.moveTo(centerX,centerY); 
    context.arc(centerX,centerY,radius, degreesToRadians(0), degreesToRadians((-1) * angle),false); 
    context.closePath(); 
    context.stroke(); 
    context.strokeStyle = 'black'; 
    context.lineWidth = 2; 
    for(var startingAngle=begin; startingAngle < 360;){ 
     context.beginPath(); 
     context.moveTo(centerX, centerY); 
     context.arc(centerX, centerY, radius, degreesToRadians(startingAngle), startingAngle + arcSize, false); 
     context.closePath(); 
     context.stroke(); 
     startingAngle = startingAngle + interval; 
    } 
} 

function degreesToRadians(degrees) { 
    return (degrees * Math.PI)/180; 
} 

JSFiddle