在HTML5畫布上繪制形狀

Question

我有一個函數，該函數基本上使用線條繪制特定大小的偽圓並將其填充為顏色。

但是，當我嘗試調用我的方法時，它不會繪制，並且在調試控制台上沒有發現錯誤（我正在使用chrome），而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();
}