如何阻止 html5 画布使用 for 循环制作这些额外的矩形？答案

【问题标题】：How can I stop html5 canvas from making this additional rectangles with a for loop?如何阻止 html5 画布使用 for 循环制作这些额外的矩形？
【发布时间】：2016-04-02 09:03:42
【问题描述】：

我正在做一个画布，我在其中展示一个抛射运动。我有这个问题，我的画布在 for 循环中绘制了额外的矩形。如果我取下 for 循环并绘制一个矩形，则绘制相同的矩形而没有填充。我的问题通过结束路径得到了解决（endPath() 部分底部有一张图片和代码），但我丢失了我的篮球图像/绘图。

在我的代码中，我使用了两个 context.beginPath。这是我的代码：

function objetos2(){
    context.lineWidth = 5;
    if(x>900 && tiempo>11)
    {
        context.moveTo(canvas.width, y);
    }
    else
    {
        context.moveTo(x, y);
    }

if(x>900 && tiempo>11)
{
    context.lineTo(canvas.width, y-vy);
    context.lineTo(-5+canvas.width, y-vy-10);
    context.lineTo(5+canvas.width, y-vy-10);
    context.lineTo(canvas.width, y-vy);
}
else
{
    context.beginPath();
    for(i=0;i<canvas.width-100;i+=200)
    {
        context.fillStyle = "brown";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "brown"; 
        context.rect(-x+i+210, 450,  10, 50);
    }
    context.beginPath();
    for(i=0;i<canvas.width-399;i+=200)
    {
        context.fillStyle = "grey";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "grey"; 
        context.rect(-x+i+220, 450,  190, 5);
        context.rect(-x+i+220, 470,  190, 5);
    }
}
context.stroke();
}

这是我的函数被调用的地方：

function dibupun(vx,vy){
    context.clearRect(0,0,900,500);
    var imageObj = new Image();

imageObj.onload = function() {
    context.moveTo(x, y);
    trazaraltura(vy);
    velocidadx(vx, vy);
    velocidady(vy);
    context.save();
    context.shadowOffsetY = 25;
    context.shadowOffsetX = 20;
    context.shadowBlur = 0.5;
    context.shadowBlur = 0.5;
    context.shadowColor = 'rgba(50, 50, 50, 0.1)';
    objetos2();
    context.restore();

    context.beginPath();

    flechay(vy);
    flechax(vx, vy);

    context.fillStyle = "white";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = "blue"; 
    context.stroke();

    if(x>900 && tiempo>11)
    {
        context.drawImage(imageObj, canvas.width-100-14, y-14, 30, 30);
    }
    else
    {
        context.drawImage(imageObj, x-14, y-14, 30, 30);
    }
};
imageObj.src = 'http://www.dpcdsb.org/NR/rdonlyres/132B2859-0F1F-42F6-BE18-A151ABF439BE/105710/basketball.png';
sombras();
}

我想提到的是，当我使用这两个 context.beginPath() 然后使用 endPath() 时，它可以正常绘制，但我在画布内丢失了我的篮球图像/绘图。

context.beginPath();
        for(i=0;i<canvas.width-100;i+=200)
        {
            context.fillStyle = "brown";
            context.fill();
            context.lineWidth = 2;
            context.strokeStyle = "brown"; 
            context.rect(-x+i+210, 450,  10, 50);
        }
        context.beginPath();
        for(i=0;i<canvas.width-380;i+=200)
        {
            context.fillStyle = "grey";
            context.fill();
            context.lineWidth = 2;
            context.strokeStyle = "grey"; 
            context.rect(-x+i+220, 450,  190, 5);
            context.rect(-x+i+220, 470,  190, 5);
        }
        context.endpath();

【问题讨论】：

没有阅读完整的问题，但对于 endPath 部分，它不是 context2d 方法，它会抛出异常并停止执行进一步的代码。
@Kaiido 我自己解决了。从来没有例外，但还是谢谢你。

标签： javascript html canvas

【解决方案1】：

我自己解决了，我只是让它不可见。代码如下：

    for(i=0;i<canvas.width-199;i+=200)
    {
        context.fillStyle = "brown";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "brown"; 
        context.rect(-x+i+210, 450,  10, 50);
        if(i>canvas.width-200)
        {
            context.globalAlpha=0;
            context.rect(-x+i+210, 450,  10, 50);
        }
    }
    context.beginPath();
    for(i=0;i<canvas.width-399;i+=200)
    {
        context.fillStyle = "grey";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "grey"; 
        context.rect(-x+i+220, 450,  190, 5);
        context.rect(-x+i+220, 470,  190, 5);
        if(i>=canvas.width-400)
        {
            context.globalAlpha=0;
            context.fillRect(-x+i+220, 450,  190, 5);
            context.fillRect(-x+i+220, 470,  190, 5);
        }

【讨论】：