HTML5 Canvas: globalCompositeOperation (eraser)

Question

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

http://canvaspaint.org/ имеет резинку, но это только белая линия - ОК, только если фон белый ...

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

Есть ли способ использования globalCompositeOperation в качестве ластика?

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

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

Спасибо.

Answer 1

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

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

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

Answer 2

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

Answer 3

ctx.globalCompositeOperation = "destination-out"; 

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