Манипуляция пикселями с помощью HTML5 Canvas

Хорошо, я делаю скетч-приложение. Есть два холста: один - это фоновое изображение, а другой - оверлей, на котором пользователь может рисовать. Я пытаюсь реализовать функцию ластика, которая будет «стирать» любые пути, нарисованные пользователем на оверлее. Пока моя функция стирания выглядит так:

function eraseCanvas(bottomCtx, topCtx, x, y, strokeWidth) {
            var bottomPixels = bottomCtx.getImageData(x, y, strokeWidth, strokeWidth);
            var topPixels = topCtx.getImageData(x, y, strokeWidth, strokeWidth);

            for (var i = 0; i < topPixels.data.length; i += 4) {
                topPixels.data[i] = bottomPixels.data[i];
                topPixels.data[i + 1] = bottomPixels.data[i + 1];
                topPixels.data[i + 2] = bottomPixels.data[i + 2];
                topPixels.data[i + 3] = bottomPixels.data[i + 3];
            }
            topCtx.putImageData(topPixels, x, y);
        }

По сути, я пытаюсь стереть пиксели наложения, переписав их, используя пиксели фона, но это не работает. Почему?

javascript html html5-canvas

02.08.2018 00:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не могли бы вы упростить свой метод, скопировав блок пикселей из нижнего контекста непосредственно в верхний контекст, используя следующие аргументы dirtyWidth и dirtyHeight?

function eraseCanvas(bottomCtx, topCtx, x, y, strokeWidth) {

    var bottomPixels = bottomCtx.getImageData(x, y, strokeWidth, strokeWidth);

    // Directly draw bottomPixels from bottomCtx into topCtx, at the 
    // x,y coordinates, with 0,0 offset, between dimensions of 
    // strokeWidth x strongWidth 
    topCtx.putImageData(bottomPixels, x, y, 0, 0, strokeWidth, strokeWidth);
}

Документация MDN для putImageData предлагает дополнительную информацию об аргументах dirtyWidth и dirtyHeight, о которых я говорю.

Я обнаружил, что моя функция также работает правильно, я просто продолжал перерисовывать путь, как идиот, после этого, однако вы показали мне гораздо более чистый способ кодирования моей функции, так что спасибо.

— 02.08.2018 01:36

02.08.2018 00:09