Блог

Главная - Вопросы по программированию - Как перерисовать прямоугольник в canvas?

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

#javascript #canvas #html5-canvas

#javascript #холст #html5-холст

Вопрос:

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

 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

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

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

Ответ №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();

Комментарии:

1. Спасибо за ваш ответ. Как я могу задать фон только для второго прямоугольника?

2. Нарисовав на нем белый прямоугольник (т.Е. Закрыв его). Я обновлю свой ответ.

Ответ №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);
});