0

基本的に線を使って特定の大きさの疑似円を描き、それを色で塗りつぶす機能があります。

ただし、メソッドを呼び出そうとすると、描画されず、デバッグコンソールでエラーが見つかりませんでした（私は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();
}

どんな助けでも大歓迎です！

4

1 に答える 1

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();
}
于 2012-12-08T16:49:45.497 に答える