Как перерисовать прямоугольник на холсте?

Question

На холсте я нарисовал два прямоугольника.В событии нажатия кнопки я хочу перерисовать один прямоугольник из этих двух прямоугольников, которые я нарисовал.Как мне этого добиться?

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 20, 150, 100);
ctx.fill();

ctx.rect(200, 20, 100, 100);
ctx.stroke();

change = () => {
//need to change height of second rectangle
    alert('size changed')
}

jsFiddle link

В приведенной выше ссылке fiddle я хочу изменить высоту второго прямоугольника.Кто-нибудь может предложить идеи для достижения этой цели?

Заранее спасибо,

Answer 1

Вам нужно перерисовать холст - то есть перерисовать фон и два прямоугольника, примерно так:

ctx.fillRect(0, 0, canvas.width, canvas.height);

//change the size of one rectangle, then redraw both of them
ctx.rect(10, 20, 150, 100);
ctx.fill();
ctx.rect(200, 20, 200, 150);
ctx.stroke();

Другим способом было бы покрыть только второй прямоугольник белым прямоугольником (или любым другим цветом фона) и перерисовать второй прямоугольник:

//draw first rectangle
ctx.rect(10, 20, 150, 100);

//cover old rectangle using a white rect
ctx.fillStyle = "white";
ctx.fill();
ctx.rect(200, 20, 100, 100);

//redraw second rectangle
ctx.fillStyle = "black";
ctx.fill();
ctx.rect(200, 20, 200, 150);
ctx.stroke();

Answer 2

Вам необходимо сохранять информацию о прямоугольнике и перерисовывать их при каждом изменении.

Это связано с тем, что canvas не хранит информацию как объекты, а просто фиксирует пиксели.

//Setup canvas
var canvas = document.body.appendChild(document.createElement("canvas"));
var ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 400;
ctx.fillStyle = "red";
//Setup rectangles as objects
var rect1 = { x: 10, y: 20, w: 150, h: 100 };
var rect2 = { x: 200, y: 20, w: 100, h: 100 };
//Setup controls
var table = document.body.appendChild(document.createElement("table"));
var tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "X-position:";
var xInput = tr.appendChild(document.createElement("input"));
xInput.type = "number";
xInput.value = rect2.x.toString();
tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "Y-position:";
var yInput = tr.appendChild(document.createElement("input"));
yInput.type = "number";
yInput.value = rect2.y.toString();
tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "Width:";
var wInput = tr.appendChild(document.createElement("input"));
wInput.type = "number";
wInput.value = rect2.w.toString();
tr = table.appendChild(document.createElement("tr"));
tr.appendChild(document.createElement("td")).innerHTML = "Height:";
var hInput = tr.appendChild(document.createElement("input"));
hInput.type = "number";
hInput.value = rect2.h.toString();
//Draw function
function change() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    [rect1, rect2].forEach(function (rect) {
        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
    });
}
//initial draw
change();
//Redraw event
function redraw() {
    rect2.x = parseInt(xInput.value, 10);
    rect2.y = parseInt(yInput.value, 10);
    rect2.w = parseInt(wInput.value, 10);
    rect2.h = parseInt(hInput.value, 10);
    change();
}
//Bind events
[xInput, yInput, wInput, hInput].forEach(function (input) {
    input.addEventListener("change", redraw);
    input.addEventListener("keyup", redraw);
});