HTML5 Canvas - проблема с компоновкой назначения

Question

Я рисую некоторые кривые внутри холста.После завершения кривой мне нужно отменить некоторую часть чертежа (мне нужны только первые 75% кривой, поэтому необходимо удалить последние 25% кривой).

Ниже приведен журнал точек, что моя кривая проходит.После 7-го пункта я изменяю свойство globalCompositeOperation контекста холста на «destination-out» и начинаю рисовать в обратном порядке.Как вы можете видеть снизу, точки в прямом и обратном направлении абсолютно совпадают.Но моя проблема при удалении в обратном направлении, строки не удаляются правильно.Я вижу небольшие следы линий.Проблема проверена в Chrome, Firefox и Opera.

point X: (484,324) with Count: 0 angle :0.7853981633974483
spiroCanvasCore.js:62point X: (460,420) with Count: 1 angle :1.5707963267948966
spiroCanvasCore.js:62point X: (315,444) with Count: 2 angle :2.356194490192345
spiroCanvasCore.js:62point X: (220,300) with Count: 3 angle :3.141592653589793
spiroCanvasCore.js:62point X: (315,155) with Count: 4 angle :3.9269908169872414
spiroCanvasCore.js:62point X: (460,179) with Count: 5 angle :4.71238898038469
spiroCanvasCore.js:62point X: (484,275) with Count: 6 angle :5.497787143782138
spiroCanvasCore.js:62point X: (460,300) with Count: 7 angle :6.283185307179586
spiroCanvasCore.js:79inverse
spiroCanvasCore.js:62point X: (484,275) with Count: 7 angle :5.497787143782138
spiroCanvasCore.js:62point X: (460,179) with Count: 6 angle :4.71238898038469
spiroCanvasCore.js:62point X: (315,155) with Count: 5 angle :3.9269908169872414
spiroCanvasCore.js:62point X: (220,300) with Count: 4 angle :3.141592653589793
spiroCanvasCore.js:62point X: (315,444) with Count: 3 angle :2.356194490192345
spiroCanvasCore.js:62point X: (460,420) with Count: 2 angle :1.5707963267948966
spiroCanvasCore.js:62point X: (484,324) with Count: 1 angle :0.7853981633974483

Может кто-нибудь сказать, что может вызвать эту проблему или какие-либо другие альтернативы / решения?

Вот скриншот моей кривой, послеудаление:

РЕДАКТИРОВАТЬ: вместо изменения свойства globalCompositeOperation на 'deatination-out', я просто изменил стиль штриховки контекста холста, чтобы он соответствовал моему цвету фона.Но проблема остается

Answer 1

Причиной вашей проблемы является сглаживание.Рассмотрим следующее, отдельно от режима компоновки: http://jsfiddle.net/9bheb/5/

ctx.lineWidth = 1;

ctx.strokeStyle = '#f00';
ctx.strokeRect( 10.5, 10.5, 20, 20 );    
ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );

// Middle case omitted for brevity

ctx.strokeStyle = '#f00';
ctx.strokeRect( 40, 10, 20, 20 );
ctx.strokeStyle = '#fff';
ctx.strokeRect( 40, 10, 20, 20 );

В первом наборе кода 100% непрозрачная 1px красная линия рисуется точно в соответствии схолст сетка, видно слева вверху.Затем поверх нее рисуется 100% непрозрачная белая линия, стирающая исходную линию.

Во втором наборе кода линия 1px точно располагается между двумя пикселями и, следовательно, рисуется как красная непрозрачность 2px 50%границы.Затем на , что рисуется белая линия размером 2px 50%, в результате чего на холсте остается 25% красная (светло-розовая) граница (видно справа вверху).Это примерно то, что происходит в вашем случае, хотя и в режиме композитинга.

Вы не можете "стереть" путь, нарисовав его снова.

Answer 2

начиная с хорошего анализа Phrogz, если вы сотрете с немного большей шириной линии, вы сможете избавиться от оставшихся теней.

Попробуйте его с его jfiddle, установив lineWidth = 2 при стирании. Вот моя вилка: // http://jsfiddle.net/UxfNg/3/

Answer 3

Вместо того, чтобы "удалять" часть, вы можете вместо этого сделать область отсечения вокруг части кривой, которую вы хотите, так, чтобы часть, которая будет удалена, никогда не создавалась?