Question

我真的很沮丧这个问题。所以，我有以下简单的代码：

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

function Square(x, y, sizeOfSide) {

    this.draw = function () {
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x + sizeOfSide, y);
        ctx.lineTo(x + sizeOfSide, y + sizeOfSide);
        ctx.lineTo(x, y + sizeOfSide);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
    }

    this.setColor = function (color) {
        ctx.fillStyle = color;
        ctx.fill();
    }
}

广场是我的对象。我可以画正方形，也许我可以为它设置填充颜色。所以下一个代码工作正常。

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);
square1.draw();
square1.setColor('green');
square2.draw();
square2.setColor('yellow');

https://i.stack.imgur.com/gz50K.png

但如果我把它更改为：

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);
square1.draw();
square2.draw();

square1.setColor('green');
square2.setColor('yellow');

它崩溃了：

https://i.stack.imgur.com/Qeojl.png

在我看来，我理解其中的原因。两个对象具有相同的上下文。 square2为上下文设置黄色，square1失去颜色。也许我不对。我希望它们是两个独立的对象，我将能够在代码中的任何地方操纵它们的条件。我不知道接下来该做什么。请帮忙！

Answer 1

<强>样本

var canvas = document.getElementById('canvasField');
var ctx = canvas.getContext('2d');

function Square(x, y, sizeOfSide) {

    this.draw = function () {
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x + sizeOfSide, y);
        ctx.lineTo(x + sizeOfSide, y + sizeOfSide);
        ctx.lineTo(x, y + sizeOfSide);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
    }

    this.setColor = function (color) {
        this.draw();
        ctx.fillStyle = color;
        ctx.fill();
    }
}

//var square1 = new Square(100, 100, 100);
//var square2 = new Square(250, 200, 100);
//square1.draw();
//square1.setColor('green');
//square2.draw();
//square2.setColor('yellow');

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);

//square1.draw();
//square2.draw();

square1.setColor('green');
square2.setColor('yellow');

canvas {
 border : 2px dotted blue;
}

<canvas id='canvasField' width=500 height=500></canvas>

在draw函数内调用对象的setColor函数。因此，它将首先绘制正方形，然后使用给定的颜色fill。

Answer 2

大多数情况下，当您想要在画布上更改某些内容时，您必须再次绘制它。你的第一段代码是好的，如果你想改变一个方块的颜色，使用setColor然后再画一次。

Javascript画布：为两个不同的对象（正方形）设置自己的颜色

2 个答案: