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

Question

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

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

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

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

Заранее спасибо за любую помощь!

Answer 1

Попробуйте это:

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

«Атрибут globalCompositeOperation задает, как фигуры и изображения выводятся на чистое растровое изображение» specs

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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

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

( ссылка )

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

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

Answer 5

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

    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;

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

Answer 6

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

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

Answer 7

Если вы используете 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.

Answer 8

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