javascript - 在 Javascript 中填充自定义绘制的形状

Question

我正在尝试填充我制作的椭圆，但虽然我可以用它来绘制轮廓，但我无法用它来填充它。我查看了很多资源，包括 http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/和 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes ，但按照那里的建议并没有解决问题。我已经尝试解决其他错误 - 例如拼写错误、传递参数错误或我的椭圆绘制方法错误，但它们都可以独立工作。我可以画出椭圆的轮廓。我可以将上下文传递给函数。我可以填充一个非椭圆。但我无法填满我的椭圆。代码如下所示:

main();

function main(){
    var canvas = document.getElementById('landscape');
    var context = canvas.getContext('2d');
    // var mySky = new sky(0, 0);
    // mySky.render(context);
    var myLake = new lake(400, 500, context);
    myLake.render(context);
    var ctx = context;
    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
}

function lake(x, y, context){

    this.context = context;
    this.x = x;
    this.y = y;
    var width = this.context.canvas.width/2;
    var height = this.context.canvas.height/4;
    var a = width/2;
    var b = height/2;
    var phi = Math.PI/2;

    this.render = function(context){
        var inc = (2*Math.PI)/200;
        var end = 200*inc;
        var oldX = oldY = newX = newY = 0;
        var x_0 = xcoord(0);
        var y_0 = ycoord(0);
        console.log("" + x_0 + ", " + y_0);
        var i = 0;
        context.beginPath();
        context.moveTo(x_0, y_0);
        while(i < end){
            i += inc;
            newX = xcoord(i);
            newY = ycoord(i);
            context.lineTo(newX, newY);
            context.moveTo(newX, newY);
            console.log("" + newX + ", " + newY);
        }
        context.lineTo(x_0, y_0); // close up the ellipse
        context.moveTo(x_0, y_0);
        context.closePath();
        context.fillStyle = '#6EB1F5';
        context.fill();
    }

    function xcoord(t){
        return x + a*Math.cos(t)*Math.sin(phi) + b*Math.sin(t)*Math.cos(phi);
    }

    function ycoord(t){
        return y + a*Math.cos(t)*Math.cos(phi) - b*Math.sin(t)*Math.sin(phi);
    }

我是否正确使用了 fill() 函数？是因为我的椭圆没有正确关闭吗？如果可能，请不要给我太多信息 - 我想自己做，我只是想不通哪里出了问题，现在我已经花了将近 3 个小时来解决这个问题。

Answer 1

尝试删除以下位置的 moveTo:

context.beginPath();
context.moveTo(x_0, y_0); /// keep this
while(i < end){
    i += inc;
    newX = xcoord(i);
    newY = ycoord(i);
    context.lineTo(newX, newY);
    ///context.moveTo(newX, newY);  /// remove this
    console.log("" + newX + ", " + newY);
}
///context.lineTo(x_0, y_0); /// not needed as closePath will close it
///context.moveTo(x_0, y_0); /// remove this
context.closePath();

当您对每个新坐标使用 moveTo 时，您将创建仅由无法填充的单行组成的子路径。您想要创建一条连续的线，在末端闭合形成一个闭合的多边形。

除此之外，您正在正确使用 fill()。