Как очистить холст для перерисовки

Question

После экспериментов с составными операциями и рисования изображений на холсте я теперь пытаюсь удалить изображения и компоновку.Как мне это сделать?

Мне нужно очистить холст для перерисовки других изображений;это может продолжаться некоторое время, поэтому я не думаю, что рисование нового прямоугольника каждый раз будет наиболее эффективным вариантом.

Answer 1

const context = canvas.getContext('2d');

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

Answer 2

Использование: context.clearRect(0, 0, canvas.width, canvas.height);

Это самый быстрый и наглядный способ очистить весь холст.

Не используйте: canvas.width = canvas.width;

Сброс настроек canvas.width сбрасывает все состояние холста (напримерпреобразования, ширина линии, стиль обводки и т.д.), это очень медленно (по сравнению с clearRect), это работает не во всех браузерах и не описывает, что вы на самом деле пытаетесь сделать.

Работа с преобразованными координатами

Если вы изменили матрицу преобразования (напримериспользуя scale, rotate, или translate) затем context.clearRect(0,0,canvas.width,canvas.height) скорее всего, не будет очищена вся видимая часть холста.

Решение?Сбросьте матрицу преобразования перед очисткой холста:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Редактировать: Я только что выполнил некоторое профилирование, и (в Chrome) очистка холста размером 300x150 (размер по умолчанию) примерно на 10% быстрее без сброса преобразования.По мере увеличения размера вашего холста эта разница уменьшается.

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

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Answer 3

Если вы рисуете линии, убедитесь, что вы не забыли:

context.beginPath();

В противном случае линии не будут очищены.

Answer 4

Другие уже проделали отличную работу, отвечая на этот вопрос, но если простой clear() метод для объекта context был бы полезен вам (это было для меня), это реализация, которую я использую на основе ответов здесь:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Использование:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

Answer 5

• Chrome хорошо реагирует на: context.clearRect ( x , y , w , h ); как было предложено @Pentium10, но IE9, похоже, полностью игнорирует эту инструкцию.
• IE9, похоже, реагирует на: canvas.width = canvas.width; но это не очищает линии, а только фигуры, картинки и другие объекты, если вы также не используете решение @John Allsopp о первом изменении ширины.

Итак, если у вас есть холст и контекст, созданные следующим образом:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

Вы можете использовать подобный метод следующим образом:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

Answer 6

Используйте метод clearRect, передавая координаты x, y, а также высоту и ширину холста.clearRect очистит весь холст следующим образом :

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Answer 7

Это 2018 год, и до сих пор нет встроенного метода для полной очистки canvas для перерисовки. clearRect() не делает полностью очистите холст.Рисунки без заливки не удаляются (например. rect())

1.To полностью очистите холст независимо от того, как вы рисуете:

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

Плюсы:Сохраняет strokeStyle, fillStyle и т.д.;Без задержек;

Минусы:Ненужно, если вы уже используете beginPath перед рисованием чего-либо

2.Использование параметра ширина / высота:

context.canvas.width = context.canvas.width;

или

context.canvas.height = context.canvas.height;

Плюсы:Работает с IE Минусы:Сбрасывает strokeStyle, fillStyle на черный;Запаздывающий;

Мне было интересно, почему собственного решения не существует.На самом деле, clearRect() рассматривается как однострочное решение, поскольку большинство пользователей beginPath() перед рисованием любого нового пути.Хотя beginPath должен использоваться только при рисовании линий, а не замкнутого пути, подобного rect().

Это причина, по которой принятый ответ не решил мою проблему, и в итоге я потратил часы, пробуя разные хаки.Будь ты проклят , мозилла

Answer 8

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

это просто.предположим, ваш цвет фона белый:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Answer 9

Быстрый способ - это сделать

canvas.width = canvas.width

Не знаю, как это работает, но это так!

Answer 10

в webkit вам нужно установить ширину на другое значение, затем вы можете вернуть ее к исходному значению

Answer 11

Я обнаружил, что во всех браузерах, которые я тестирую, самый быстрый способ - это фактически заполнить текст белым цветом или любым другим цветом, который вы хотели бы.У меня очень большой монитор, и в полноэкранном режиме clearRect работает мучительно медленно, но fillRect работает разумно.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

Недостатком является то, что холст больше не является прозрачным.

Answer 12

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Answer 13

Это сработало для моей диаграммы в chart.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

Answer 14

Это то, что я использую, независимо от границ и матричных преобразований:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

По сути, он сохраняет текущее состояние контекста и рисует прозрачный пиксель с copy как globalCompositeOperation.Затем восстанавливает предыдущее состояние контекста.

Answer 15

Простой, но не очень читаемый способ - написать это:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Answer 16

Я всегда использую

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

Answer 17

самый быстрый способ:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Answer 18

context.clearRect(0,0,w,h)   

заполните данный прямоугольник значениями RGBA :
0 0 0 0 :с хромированным
0 0 0 255 :с FF и Safari

Но

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

пусть прямоугольник заполнен
0 0 0 255
независимо от браузера !

Answer 19

Если вы используете только clearRect, если у вас есть это в форме для отправки вашего чертежа, вы получите вместо отправки очистку, или, возможно, ее можно сначала очистить, а затем загрузить недействительный чертеж, поэтому вам нужно будет добавить preventDefault в начале функции:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

Надеюсь, это кому-то поможет.

Answer 20

Context.clearRect(starting width, starting height, ending width, ending height);

Пример: context.clearRect(0, 0, canvas.width, canvas.height);

Answer 21

Все это отличные примеры того, как вы очищаете стандартный холст, но если вы используете paperjs, то это сработает:

Определите глобальную переменную в JavaScript:

var clearCanvas = false;

Из вашего PaperScript определите:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

Теперь, где бы вы ни установили ClearCanvas в значение true, он удалит все элементы с экрана.