копировать непрозрачные пиксели только на холст HTML5

Question

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

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

Вопрос в том, как этого добиться?

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

Поэтому я подумал об использовании альфа-маски для этого и скопировать только те пиксели, которые соответствуют пикселям в маске с ненулевой альфа-версией. Это возможно?

Answer 1

Я предлагаю, чтобы ваш нарисованный холст был перед цветным изображением, которое вы хотите показать. (Вы можете использовать свое цветное изображение в качестве фонового изображения CSS для холста.)

Изначально имейте холст, содержащий черно-белое изображение со 100% непрозрачностью. Затем, когда вы рисуете, действительно стираете содержимое холста, чтобы показать изображение позади.

Как это:

var pos_x, pos_y, circle_radius;  // initialise these appropriately

context.globalCompositeOperation = 'destination-out';
context.fillStyle = "rgba(0,0,0, 1.0)";

// And "draw" a circle (actually erase it to reveal the background image)
context.beginPath();
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2);
context.fill();

Answer 2

Я бы, вероятно, использовал несколько областей отсечения с разной альфой (по одному мазку для каждой), чтобы имитировать эффект, который вы хотите получить.Сначала сделайте рендеринг с низкой непрозрачностью (вставьте с помощью drawImage), а затем сделайте остальные, пока не достигнете альфа = 1,0.

Answer 3

Рассматривали ли вы использование радиальных градиентов, которые переходят от непрозрачного цвета к полностью прозрачному?

Вот демонстрация от Mozilla.Круги нарисованы так, как вам нужно.- https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html