Самый быстрый способ перетаскивания части закадрового холста на экранный холст

Question

Я хочу записать небольшую часть внеэкранного холста (то есть координаты x, y и высоту ширины w, h) на экранный холст. Можно ли это сделать и какой самый быстрый способ сделать это?

Answer 1

Да, вам просто нужно использовать drawImage() или putImageData().Вызов функции drawImage() может принимать холст в качестве параметра источника данных, поэтому вы можете рисовать на экранном холсте, используя закадровый в качестве источника.Если у вас есть прозрачность, которую вы должны поддерживать, вам нужно будет использовать putImageData(), которая полностью перезаписывает существующие данные холста.И наоборот, drawImage() будет применять режим смешивания к данным, используя параметр globalCompositeOperation вашего контекста.

var offscreen_canvas = document.getElementById("offscreen_canvas");
var onscreen_canvas = document.getElementById("onscreen_canvas");
var onscreen_context = onscreen_canvas.getContext("2d");

// Don't care about transparency:
onscreen_context.drawImage(offscreen_canvas, source_x, source_y, source_width, source_height, dest_x, dest_y, dest_width, dest_height);

// Or, if we care about transparency preservation:
var offscreen_context = offscreen_canvas.getContext("2d");
var offscreen_data = offscreen_context.getImageData(x, y, width, height);

onscreen_context.putImageData(offscreen_data, dest_x, dest_y);

Ссылки: drawImage () и putImageData ().