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

есть пример, который загружает 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 с холста. Что такое лучший способ сделать это?

Ответы

Ответ 1

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

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" будут шириной и высотой исходного изображения.

edit — если вам просто нужен другой образ, почему бы просто не поместить его туда? Он будет перезаписывать все пиксели на холсте.

Ответ 2

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

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

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

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

Ответ 3

Если то, что сказал "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);
}

P.S. Я создаю движок для javascript canvas. Будет опубликован в течение недели

Мир

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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