Question

我正在做一个画布，我展示了一个弹丸运动。我有这个问题，我的画布在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();

Answer 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);
        }

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

1 个答案: