javascript - 获取要在 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();
}