Удалить элементы из холста

Question

Удалить элементы из холста

0

Это мой jsfiddle:

http://jsfiddle.net/alonshmiel/c4upM/45/

и у меня есть две вещи, которые мне нужно сделать, чтобы закончить задачу:

1) когда пользователь нажимает маленький серый круг, удалите линию из маленького светло-голубого круга.

Я попытался сделать в этом коде:

// hide the line of the small light blue circle
var c=document.getElementById(canvas_id);
var ctx=c.getContext("2d");
ctx.clearRect(c.getAttribute('cx')-1,c.getAttribute('cy')-95,2,40);

Он работает, но не идеально (clearRect очищает часть небольшой области, которую я хочу очистить).

2) когда пользователь нажимает на маленький круг светло-голубого цвета, удалите линию из круга с серым серым цветом.

Любая помощь ценится!

Спасибо за чтение!

Alon Shmiel 13 дек. 2013, в 23:58

Источник

1

Гораздо проще просто перерисовать все, но пропустить строку;) Это потому, что существующую строку очень трудно "отрисовать" из-за сглаживания, которое автоматически применяет браузер.
markE 13 дек. 2013, в 22:56
0

Я думал об этом, но думал, что это не эффективно .. Я делаю это, большое спасибо !!!!!!! за всю вашу помощь !!!
Alon Shmiel 13 дек. 2013, в 23:10

Теги:

javascript

jquery

canvas

1 ответ

Ещё вопросы

Гораздо проще просто перерисовать все, но пропустить строку;) Это потому, что существующую строку очень трудно "отрисовать" из-за сглаживания, которое автоматически применяет браузер.
Я думал об этом, но думал, что это не эффективно .. Я делаю это, большое спасибо !!!!!!! за всю вашу помощь !!!

Steven Hansen · Accepted Answer · 2013-12-13T20-35-00.000Z

Если я правильно понимаю ваш вопрос, вы имеете в виду, что clearRect очищает часть того, что вы не хотите очищать? В частности, я предполагаю, что вы имеете в виду, что серая дуга под кругом остается с артефактом после удаления линии.

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

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