Javascript/jQuery: удалить форму/путь из холста

Я не могу найти функцию для удаления формы или пути из холста после его создания.

Итак, я создаю кривую безье между двумя точками с помощью

beginPath();
bezierCurveTo();
stroke();
closePath();

Как я могу удалить это из холста после его создания? Мне нужно вызвать функцию удаления с помощью toggle() и blur(). Я уверен, что что-то существует для этого...

Заранее благодарим за помощь!

ОТВЕТЫ

Ответ 1

Спасибо за отличный вклад для всех вас - это помогло мне найти решение:

context.clearRect(x,y,w,h);

(ссылка)

Это очистит все, что находится внутри этого прямоугольника.

Я нашел метод на странице, которую я нашел, копая для ответа ILog, чтобы сохранить/восстановить контекст, и все это там. Еще раз спасибо.

Ответ 2

Попробуйте следующее:

ctx.save();
ctx.globalCompositeOperation = "destination-out";
// drawing here you path second time
ctx.restore();

"Атрибут globalCompositeOperation устанавливает, как формы и изображения нарисованы на растровом изображении нуля specs

Как это работает, вы можете увидеть здесь.

Ответ 3

Это важно понять о <canvas>. Это сглаженное изображение, состоящее из пикселей. Как только что-то нарисовано, оно слилось в сетку пикселей и не может быть отделено от других пикселей.

Если вам нужно отделить элементы изображения, вы могли бы:

  • Наложение элементов <canvas> в стек слоев
  • Используйте <svg>, в котором каждый визуальный элемент отличается от других элементов и может управляться независимо.

Вы можете представить <canvas> как один слой в PhotoShop/Gimp/Fireworks или документ MSPaint.

Вы можете представить <svg> как документ в Illustrator/InkScape.

Ответ 4

Вы не можете удалить путь/форму из холста. Вы можете нарисовать что-то еще над ним или очистить полотно.

Ответ 5

Вы можете попробовать использовать SVG вместо холста. Там есть фантастическая библиотека под названием Raphaël, которая делает работу с SVG ветерок. Он также работает во всех браузерах, включая IE6.

С SVG каждая форма - это ее собственный элемент, который можно перемещать, преобразовывать или удалять.

Ответ 6

Чтобы очистить холст, используйте следующий код

    canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

Всегда используйте метод beginPath, когда вы начнете рисовать новый путь и метод closePath после того, как закончите рисовать свой путь.

ПРИМЕЧАНИЕ. Контуры, которые не закрыты, не могут быть очищены.

Если ваши пути не очищаются, это должно быть из-за вышеуказанной причины.

Все пути ДОЛЖНЫ начинаться с beginPath() и заканчиваться на closePath()

Пример:

     canvas_context.beginPath();
     canvas_context.moveTo(x1,y1);
     canvas_context.lineTo(x2,y2);
     canvas_context.stroke();
     canvas_context.closePath();

Следующий код также очищает ваш холст

    canvas_1.width = canvas_1.width;

ПРИМЕЧАНИЕ.. Вышеприведенный оператор повторно инициализирует холст, и он очищает холст. Любое утверждение, которое повторно инициализирует холст, очистит полотно.

Ответ 7

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

Ответ 8

Если вы используете JQuery:

var elem = $("selector");
var canvas = elem.get(0);
var context = canvas.getContext("2d");

context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();

Замените "селектор" на ваш фактический селектор JQuery.