javascript - Canvas 重复矩形不是唯一的

我正在尝试编写一个函数，该函数允许使用不同的文本值制作重复的矩形，以及一个更改框的颜色的标志。我在获取每次调用该函数的文本以及出现在各个框上的正确颜色时遇到麻烦。最后，我得到了一系列调用中的最后一个框，它是唯一具有可见文本的框。我究竟做错了什么？

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

this.buildBox = function(xpos, ypos, width, height, text, colorFlag) {
    ctx.font = '12px Arial';
    ctx.strokeStyle = 'black';
    ctx.fillStyle = colorFlag === true ? '#ff6666' : '#fff';
    ctx.rect(xpos, ypos, width, height);
    ctx.fill();
    ctx.stroke();

    function textFill(text, offset) {
    }

    if(text !== null && text !== undefined) {
      ctx.strokeText(text, xpos + 10, ypos + 20);
    }
}
// test data
this.buildBox(84,10,64,44, 888, true);
this.buildBox(84,64,64,44, 999, false);
this.buildBox(84,118,64,44, 777, true);

要进行测试，请尝试注释掉对buildBox的一些调用，然后在下面的小提琴中查看结果。

JSFiddle

最佳答案

若要使draw方法仅适用于您在一个函数调用中所做的事情，请将以下行添加为函数的第一行：

ctx.beginPath();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

this.buildBox = function(xpos, ypos, width, height, text, colorFlag) {
    ctx.beginPath();
    ctx.font = '12px Arial';
    ctx.strokeStyle = 'black';
    ctx.fillStyle = colorFlag === true ? '#ff6666' : '#fff';
    ctx.rect(xpos, ypos, width, height);
    ctx.fill();
    ctx.stroke();

    function textFill(text, offset) {
    }

    if(text !== null && text !== undefined) {
      ctx.strokeText(text, xpos + 10, ypos + 20);
    }
}


// test data
this.buildBox(84,10,64,44, 888, true);
this.buildBox(84,64,64,44, 999, false);
this.buildBox(84,118,64,44, 777, true);

<canvas id="canvas"></canvas>

如果没有此行，则方法fill和stroke适用于到目前为止绘制的所有内容。使用beginPath，您可以合并之前所做的工作，并从新的“部分”开始。