Удаление изображения с холста в HTML5

Question

есть пример, который загружает 2 изображения:

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

    var img1 = new Image();
    img.src = "/path/to/image/img1.png";
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
    };

    var img2 = new Image();
    img2.src = "/path/to/image/img2.png";
    img2.onload = function() {
      ctx.drawImage(img2, 100, 100);
    };

Мне нужно удалить (заменить) img2 с холста.Каков лучший способ сделать это?

Answer 1

Я думаю, вы, возможно, неправильно поняли, что такое холст.

Холст - это по существу двумерная сетка пикселей вдоль оси 'X' и оси 'Y'. Вы используете API для рисования пикселей на этом холсте, поэтому, когда вы рисуете изображение, вы в основном рисуете пиксели, которые составляют это изображение на вашем холсте. Причина в том, что НЕТ метода, который позволяет вам просто удалить изображение, потому что Canvas не знает, что там есть изображение, он просто видит пиксели.

Это не похоже на HTML DOM (объектную модель документа), где все является элементом HTML или реальной «вещью», с которой вы можете взаимодействовать, событиями сценария подключения и т. Д. Это не относится к тому, что вы рисуете на холст. Когда вы рисуете «вещь» на холсте, эта вещь не становится чем-то, на что вы можете нацелиться или попасть, это всего лишь пиксели. Чтобы получить «вещь», вам нужно каким-то образом представлять свою «вещь», например, объект JavaScript, и где-то поддерживать коллекцию этих объектов JS. Вот как работают Canvas-игры. Это отсутствие DOM-подобной структуры для Canvas делает рендеринг очень быстрым, но может быть проблемой для реализации элементов пользовательского интерфейса, которые вы можете легко подключать и взаимодействовать, удалять и т. Д. Для этого вы можете попробовать SVG.

Чтобы ответить на ваш вопрос, просто нарисуйте прямоугольник на холсте, который покрывает ваше изображение, используя те же координаты и размеры X / Y, которые вы использовали для исходного изображения, или попробуйте решение Pointy. «Сокрытие» - это, вероятно, неправильная терминология, поскольку вы фактически заменяете пиксели (в Canvas нет слоев).

Answer 2

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

var img = ctx.createImageData(w, h);
for (var i = img.data.length; --i >= 0; )
  img.data[i] = 0;
ctx.putImageData(img, 100, 100);

где "w" и "h" - это ширина и высота вашего исходного изображения.

изменить & mdash; если вы просто хотите, чтобы там было другое изображение, почему бы просто не разместить его там? Он перезапишет все пиксели на холсте.

Answer 3

Вы можете использовать функцию clearRect () для очистки области изображения. Вместо очистки всего контекста вы можете очистить только область изображения, используя это:

ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height );

Answer 4

Если то, что сказал «Sunday Ironfoot», правильно, то лучший способ удалить изображение - нарисовать изображения еще раз с нуля.Для этого вам нужно иметь массив изображений и рисовать только те, которые вы используете.Например,

function EmptyClass{};
var img=new Array();
img[0]=new EmptyClass;
img[0].i=new Image();
img[0].src="yourfile1.jpg";
img[0].enabled=true;

img[1]=new EmptyClass;
img[1].i=new Image();
img[1].src="yourfile2.jpg";
img[1].enabled=false;// <-------- not enabled, should not be drawn equivalent to removing


img[2]=new EmptyClass;
img[2].i=new Image();
img[2].src="yourfile3.jpg";
img[2].enabled=true;

for(var i=0;i<3;i++){
if(img[i].enabled)ctx.drawImage(img[i], 100, 100);
}

PS Я создаю движок для холста javascript.Разместим в течении недели

Peace

Answer 5

В отличие от рисования вещей самостоятельно, если вы «замените» изображение на холсте, старое все еще там.

Canvas c2;
...
        if (null != Image2) {
            var ctx = c2.getContext("2d");
            ctx.clearRect(0, 0, c2.width, c2.height);
        }

Answer 6

Вы можете стереть изображение, снова нарисовав то же изображение, используя другую globalCompositeOperation

ctx.globalCompositeOperation ="xor"
ctx.drawImage(img2, 100, 100);

См. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Answer 7

Можете ли вы наложить на холст объекты (я думаю, я должен попробовать, прежде чем спрашивать, вы можете -1 меня за то, что я ленивый). Я думаю, мне было бы интересно иметь один элемент canvas в качестве фона, а затем другой для объектов слоя, которые появляются и исчезают из поля зрения. Может быть немного эффективнее, чем перерисовывать каждое изображение, если оно будет удалено или перемещено. Я поиграю и посмотрю, что найду.