HTML5 Canvas: globalCompositeOperation (ластик)

Question

Как я могу использовать globalCompositeOperation для стирания чего-либо?

http://canvaspaint.org/ имеет ластик, но это просто белая линия - хорошо, только если ваш фон белый ...

Я знаю, что вы можете использовать ctx.clearRect ().Но на самом деле это не сработало для меня, потому что при перетаскивании мыши с помощью ластика (установленного на 8x8px) он создает только неподключенные квадраты размером 8x8px, а не плавную линию.ластик?

Что-то вроде:

ctx.globalCompositeOperation = "___something___";
ctx.beginPath();
ctx.lineTo(mouseX , mouseY);
ctx.closePath();

Спасибо.

Answer 1

Да, вы можете стереть, используя globalCompositeOperation , как описано здесь .Просто установите его на "copy" и используйте, например, strokeStyle = "rgba(0,0,0,0)", и это очистит холст в обводке.

Обновление: спасибо за указание, что это не работает сейчас @ будет-хуанг.Как уже упоминалось, для globalCompositeOperation должно быть установлено значение destination-out, а для strokeStyle установлено значение rgba(0,0,0,1).(На самом деле вы можете иметь любые значения RGB, просто вам нужно установить альфа на 1.0, чтобы полностью стереть содержимое обводки.)

Вот пример стирания: http://jsfiddle.net/FGcrq/1/

Answer 2

ctx.globalCompositeOperation = "destination-out";

Это должно сработать.Вы также можете использовать «xor» для удаления благости.

Answer 3

Я так не думаю.Но просто измените цвет линии на цвет фона.Также, если вам нужны ластики разных размеров, увеличьте размер строки.ctx.lineWidth=//default 1.0 и ctx.strokeStyle=//default black Я бы также предложил использовать ctx.save() и ctx.restore(), чтобы вам не пришлось беспокоиться о сбросе атрибутов строки.