獲得的形狀繪製HTML5的Canvas

Question

我有一個基本使用線條吸引特定大小的僞圓，填充它在顏色的功能上。

然而，當我嘗試打電話給我的方法，它不畫，我發現調試控制檯（我使用鉻）和上的jsfiddle沒有錯誤吐出來了沒有錯誤我。

下面是代碼：

function drawLineCircle (x, y, size, colour, scale, segments) { 
    context.save(); 

    context.strokestyle = '#000000'; 
    context.fillStyle = colour; 
    context.lineWidth = 3; 

    context.beginPath(); 

    var anglePerSegment = Math.PI *2/segments; 

    for (var i = 0; i <= segments; i = i + 1){ 
     var angle = anglePerSegment * i; 
     var radius = size * scale; 
     var a  = x + radius * cos (angle); 
     var b  = y + radius * sin (angle); 
     if (i == 0) 
      context.moveTo (a, b); 
     else 
      context.lineTo (a, b); 

    } 

    context.stroke(); 
    context.fill(); 

    context.closePath(); 
    context.restore(); 
} 

任何幫助將不勝感激！

Answer 1

有幾個與你的代碼的問題：

1. 您還沒有定義context
2. cos和sin是Math

這裏的屬性被修正的例子：http://jsfiddle.net/REw7j/1/

function drawLineCircle (x, y, size, colour, scale, segments) { 
    var canvas = document.getElementById('example'); 
    var context = canvas.getContext('2d'); 
    context.save(); 

    context.strokestyle = '#000000'; 
    context.fillStyle = colour; 
    context.lineWidth = 3; 

    context.beginPath(); 

    var anglePerSegment = Math.PI *2/segments; 

    for (var i = 0; i <= segments; i = i + 1){ 
     var angle = anglePerSegment * i; 
     var radius = size * scale; 
     var a  = x + radius * Math.cos (angle); 
     var b  = y + radius * Math.sin (angle); 
     if (i == 0) 
      context.moveTo (a, b); 
     else 
      context.lineTo (a, b); 

    } 

    context.stroke(); 
    context.fill(); 

    context.closePath(); 
    context.restore(); 
}