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()。

Answer 2

因为你问，有一种更容易和更便宜的方法来绘制椭圆。

如下所示：

function ellipse(context, x, y, a, b, theta) {
    context.beginPath();
    context.save();
    /* translate to avoid having our x and y values scaled */
    context.translate(x, y); 
    /* we can even do some rotation. (rotate before stretching!) */
    context.rotate(theta);
    /* now stretch the axes */
    context.scale(a, b);
    /* circle of radius 1, centred at the origin */
    context.arc(0, 0, 1, 0, 2*Math.PI, false);
    /* undo transformations */
    context.restore();
    context.closePath();
}

JSFiddle here。

Answer 3

function ellipse(context, x, y, a, b, theta) {
context.beginPath();
context.save();
/* translate to avoid having our x and y values scaled */
context.translate(x, y);
    context.scale(Math.random() * 1 ,Math.random() * 1);

/* we can even do some rotation. (rotate before stretching!) */
context.rotate(theta);
/* now stretch the axes */
context.scale(a, b);
/* circle of radius 1, centred at the origin */
context.arc(0, 0, 1, 0, 2*Math.PI, false);
/* undo transformations */
context.restore();
context.closePath();};

setInterval(function(){abc()}, 100);
var c = document.getElementById("c");
 var ctx = c.getContext("2d");

function abc()
{
c.width = c.width;
for (var i=0; i < 20; i++) {
ellipse(ctx, i*50+25, 100, 20, 30, Math.random() * 10 - 5);
if (i % 3)
    ctx.fill();
else
    ctx.stroke();
};
};

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

3 个答案: