Jak wyczyścić płótno do przerysowania

Po eksperymentowaniu z operacjami złożonymi i rysowaniu obrazów na płótnie próbuję teraz usunąć obrazy i kompozycję. Jak mam to zrobic?

Muszę wyczyścić płótno, aby przerysować inne obrazy; to może trwać przez jakiś czas, więc nie sądzę, aby rysowanie nowego prostokąta za każdym razem było najbardziej wydajną opcją.

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

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

Posługiwać się: context.clearRect(0, 0, canvas.width, canvas.height);

Jest to najszybszy i najbardziej opisowy sposób na wyczyszczenie całego obszaru roboczego.

Nie używaj: canvas.width = canvas.width;

Resetowanie canvas.widthresetuje cały stan obszaru roboczego (np. Transformacje, lineWidth, strokeStyle itp.), Jest bardzo wolny (w porównaniu do clearRect), nie działa we wszystkich przeglądarkach i nie opisuje tego, co tak naprawdę próbujesz zrobić.

Radzenie sobie z transformowanymi współrzędnymi

Jeśli zmodyfikowałeś macierz transformacji (np. Używając scale, rotatelub translate) context.clearRect(0,0,canvas.width,canvas.height), prawdopodobnie nie wyczyści całej widocznej części obszaru roboczego.

Rozwiązanie? Zresetuj macierz transformacji przed wyczyszczeniem kanwy:

// 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();

Edycja: Właśnie przeprowadziłem profilowanie i (w Chrome) jest około 10% szybsze wyczyszczenie obszaru roboczego 300 x 150 (domyślny rozmiar) bez resetowania transformacji. Wraz ze wzrostem rozmiaru płótna różnica ta spada.

Jest to już stosunkowo mało znaczące, ale w większości przypadków będziesz rysować znacznie więcej niż to, co robisz, i uważam, że ta różnica w wydajności nie ma znaczenia.

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

Jeśli rysujesz linie, pamiętaj, aby nie zapomnieć:

context.beginPath();

W przeciwnym razie linie nie zostaną usunięte.

Inni już wykonali świetną robotę, odpowiadając na pytanie, ale jeśli prosta clear()metoda na obiekcie kontekstowym byłaby dla ciebie przydatna (to było dla mnie), jest to implementacja, której używam na podstawie odpowiedzi tutaj:

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();
    }           
};

Stosowanie:

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
};

• Chrome dobrze reaguje na: context.clearRect ( x , y , w , h );jak sugeruje @ Pentium10, ale IE9 wydaje się całkowicie ignorować tę instrukcję.
• Wydaje się, że IE9 reaguje na: canvas.width = canvas.width;ale nie usuwa linii, tylko kształty, obrazy i inne obiekty, chyba że użyjesz rozwiązania @John Allsopp, polegającego na zmianie szerokości.

Więc jeśli masz kanwę i kontekst utworzone w ten sposób:

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

Możesz użyć metody takiej jak ta:

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

Jest rok 2018 i nadal nie ma natywnej metody całkowitego wyczyszczenia obszaru roboczego do przerysowania. clearRect() nie usuwa całkowicie płótna. Rysunki typu niepełniącego nie są usuwane (np. rect())

1. Aby całkowicie wyczyścić płótno, niezależnie od sposobu rysowania:

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

Zalety: Zachowuje styl udarowy, styl wypełnienia itp .; Bez opóźnień;

Minusy: niepotrzebne, jeśli już korzystasz z beginPath przed rysowaniem czegokolwiek

2. Za pomocą hacka szerokości / wysokości:

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

LUB

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

Plusy: Współpracuje z IE Cons: Resetuje strokeStyle, fillStyle na czarny; Laggy;

Zastanawiałem się, dlaczego natywne rozwiązanie nie istnieje. W rzeczywistości clearRect()jest uważany za rozwiązanie jednowierszowe, ponieważ większość użytkowników robi to beginPath()przed narysowaniem nowej ścieżki. Chociaż beginPath może być używany tylko podczas rysowania linii, a nie zamkniętej ścieżki jakrect().

To jest powód, dla którego zaakceptowana odpowiedź nie rozwiązała mojego problemu i skończyłem marnowaniem godzin na próby różnych hacków. Przeklnij mozillę

Użyj metody clearRect, przekazując współrzędne x, y oraz wysokość i szerokość płótna. ClearRect wyczyści całe płótno jako:

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

jest tu mnóstwo dobrych odpowiedzi. jedna dodatkowa uwaga jest taka, że ​​czasami fajnie jest tylko częściowo wyczyścić płótno. to znaczy „wyciemnia” poprzedni obraz zamiast go całkowicie wymazać. może to dać ładne efekty szlaków.

To jest łatwe. zakładając, że kolor tła jest biały:

// 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);

Szybki sposób to zrobić

canvas.width = canvas.width

Idk jak to działa, ale działa!

Oto, czego używam, bez względu na granice i transformacje macierzy:

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();
}

Zasadniczo zapisuje bieżący stan kontekstu i rysuje przezroczysty piksel za pomocą copyas globalCompositeOperation. Następnie przywraca poprzedni stan kontekstu.

To zadziałało dla mojego pieChart w 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

Zauważyłem, że we wszystkich testowanych przeglądarkach najszybszym sposobem jest wypełnienie Rect białym lub innym kolorem, który chcesz. Mam bardzo duży monitor iw trybie pełnoekranowym clearRect działa agonalnie wolno, ale fillRect jest rozsądny.

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

Wadą jest to, że płótno nie jest już przezroczyste.

w webkicie musisz ustawić szerokość na inną wartość, a następnie możesz ustawić ją z powrotem na wartość początkową

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

Prostym, ale niezbyt czytelnym sposobem jest napisanie tego:

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

// after doing some rendering

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

Zawsze używam

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

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

wypełnij podany prostokąt wartościami RGBA:
0 0 0 0: z Chrome
0 0 0 255: z FF i Safari

Ale

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

niech prostokąt wypełni się
0 0 0 255
bez względu na przeglądarkę!

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

Przykład: context.clearRect(0, 0, canvas.width, canvas.height);

najkrótsza droga:

canvas.width += 0

najszybsza droga:

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

Jeśli użyjesz tylko clearRect, jeśli masz go w formularzu, aby przesłać rysunek, zamiast tego otrzymasz przesłanie, a może najpierw możesz je wyczyścić, a następnie przesłać nieważny rysunek, więc musisz dodać preventDefault na początku funkcji:

   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);">

Mam nadzieję, że to komuś pomoże.

Zawsze tego używam

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

UWAGA

Łączenie clearRect i requestAnimationFrame pozwala na płynniejszą animację, jeśli właśnie o to chodzi

Są to świetne przykłady tego, jak wyczyścić standardowe płótno, ale jeśli używasz paperjs, to zadziała:

Zdefiniuj zmienną globalną w JavaScript:

var clearCanvas = false;

Ze swojego PaperScript zdefiniuj:

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

Teraz, gdziekolwiek ustawisz clearCanvas na true, usunie wszystkie elementy z ekranu.