Yeniden çizim için tuval nasıl temizlenir

Kompozit işlemleri denedikten ve tuval üzerine görüntü çizdikten sonra, şimdi görüntüleri kaldırmaya ve birleştirmeye çalışıyorum. Bunu nasıl yaparım?

Diğer görüntüleri yeniden çizmek için tuvali temizlemem gerekiyor; Bu bir süre devam edebilir, bu yüzden her seferinde yeni bir dikdörtgen çizmenin en verimli seçenek olacağını düşünmüyorum.

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

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

kullanın: context.clearRect(0, 0, canvas.width, canvas.height);

Bu, tüm tuvali temizlemenin en hızlı ve en açıklayıcı yoludur.

Kullanmayın: canvas.width = canvas.width;

Sıfırlama canvas.widthişlemi tüm tuval durumunu sıfırlar (örn. Dönüşümler, lineWidth, strokeStyle, vb.), Çok yavaştır (clearRect ile karşılaştırıldığında), tüm tarayıcılarda çalışmaz ve gerçekte ne yapmaya çalıştığınızı açıklamaz.

Dönüştürülmüş koordinatlarla başa çıkmak

Eğer dönüşüm matrisi değiştirilmiş olan (örneğin kullanılarak scale, rotateya da translatedaha sonra)context.clearRect(0,0,canvas.width,canvas.height) muhtemel tuvalin tamamını görünür kısmını temizlemez.

Çözüm? Tuvali temizlemeden önce dönüşüm matrisini sıfırlayın:

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

Düzenleme: Biraz profilleme yaptım ve (Chrome'da), dönüşümü sıfırlamadan 300x150'lik (varsayılan boyut) bir tuvali temizlemek yaklaşık% 10 daha hızlı. Tuvalinizin boyutu arttıkça bu fark düşer.

Bu zaten nispeten önemsiz, ancak çoğu durumda, temizlediğinizden çok daha fazla çizeceksiniz ve bu performans farkının önemsiz olduğuna inanıyorum.

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

Çizgi çiziyorsanız, unutmadığınızdan emin olun:

context.beginPath();

Aksi takdirde çizgiler temizlenmez.

Diğerleri zaten soruyu cevaplamak için mükemmel bir iş başardılar, ancak clear()bağlam nesnesindeki basit bir yöntem sizin için yararlı olursa (benim için), buradaki cevaplara dayanarak kullandığım uygulama:

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

Kullanımı:

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 iyi yanıt verir: context.clearRect ( x , y , w , h );@ Pentium10 tarafından önerildiği gibi, IE9 bu talimatı tamamen göz ardı ediyor gibi görünüyor.
• IE9 yanıt veriyor gibi görünüyor: canvas.width = canvas.width;ancak @John Allsopp'in önce genişliği değiştirme çözümünü de kullanmadığınız sürece çizgileri, sadece şekilleri, resimleri ve diğer nesneleri temizlemez.

Yani böyle bir tuval ve bağlam oluşturduysanız:

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

Bunun gibi bir yöntem kullanabilirsiniz:

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

Bu 2018 ve yine de tuvali yeniden çizmek için tamamen temizlemek için yerel bir yöntem yok. clearRect() gelmez tamamen tuval temizleyin. Doldurulmayan tip çizimleri temizlenmez (örn.rect() )

1.To tamamen bağımsız çizmek nasıl anlaşılır tuval:

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

Artıları: Inme stilini korur, fillStyle vb .; Gecikme yok;

Eksileri: Herhangi bir şey çizmeden önce beginPath kullanıyorsanız gereksizdir

2. genişliği / yükseklik kesmek kullanarak:

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

VEYA

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

Artıları: IE Eksileri ile çalışır: StroStyle, fillStyle siyaha sıfırlar; laggy;

Neden yerel bir çözüm olmadığını merak ediyordum. Aslında, clearRect()çoğu kullanıcı beginPath()herhangi bir yeni yol çizmeden önce yaptığı için tek satırlı çözüm olarak kabul edilir . BeginPath yalnızca çizgi çizerken kullanılmalı ve kapalı yol gibi değilrect().

Kabul edilen cevabın sorunumu çözmemesinin nedeni budur ve farklı hack'leri denemek için saatler harcadım. Lanet seni mozilla

X, y koordinatlarını ve tuvalin yüksekliğini ve genişliğini ileterek clearRect yöntemini kullanın. ClearRect tüm tuvali şu şekilde temizler:

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

Burada bir ton iyi cevap var. başka bir not, bazen tuvali kısmen temizlemek eğlenceli olabilir. yani, bir önceki görüntüyü tamamen silmek yerine "kaybolur". bu hoş yollar efektleri verebilir.

bu kolay. arka plan renginizin beyaz olduğunu varsayalım:

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

Hızlı bir yol yapmak

canvas.width = canvas.width

Idk nasıl çalışır ama işe yarıyor!

Sınırları ve matris dönüşümlerini dikkate almadan kullandığım şey budur:

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

Temelde, bağlam mevcut durumunu kaydeder ve bir şeffaf piksel çizer copyolarak globalCompositeOperation. Ardından, önceki bağlam durumunu geri yükler.

Bu chart.js'deki pieChart'ım için çalıştı

<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

Test ettiğim tüm tarayıcılarda en hızlı yolun aslındaRect'i beyaz veya istediğiniz renkle doldurmak olduğunu gördüm. Çok büyük bir monitör var ve tam ekran modunda clearRect agonizingly yavaş, ancak fillRect makul.

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

Dezavantajı, tuvalin artık şeffaf olmamasıdır.

webkit'te genişliği farklı bir değere ayarlamanız gerekir, ardından başlangıç ​​değerine geri ayarlayabilirsiniz.

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

Basit, ancak çok okunaklı olmayan bir yol bunu yazmaktır:

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

// after doing some rendering

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

Her zaman kullanırım

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

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

verilen dikdörtgeni RGBA değerleri ile doldurun:
0 0 0 0: Chrome
0 0 0 255 ile: FF ve Safari ile

Fakat

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

tarayıcı ne olursa olsun
0 0 0 255 ile dolu dikdörtgen
olsun!

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

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

en kısa yol:

canvas.width += 0

en hızlı yol:

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

Yalnızca clearRect kullanıyorsanız, çiziminizi göndermek için bir formunuz varsa, bunun yerine temizleme yerine bir gönderim alırsınız veya belki de önce temizlenebilir ve daha sonra geçersiz bir çizim yükleyebilirsiniz. fonksiyonun başlangıcında varsayılan:

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

Umarım birine yardımcı olur.

Bunu her zaman kullanırım

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

NOT

clearRect ve requestAnimationFrame'i birleştirmek istediğiniz şeyse daha akıcı animasyon sağlar

Bunların hepsi standart bir tuvali nasıl temizlediğinizin harika örnekleridir, ancak paperjs kullanıyorsanız, bu işe yarayacaktır:

JavaScript'te genel bir değişken tanımlayın:

var clearCanvas = false;

PaperScript'inizden şunları tanımlayın:

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

ClearCanvas'ı true olarak ayarladığınız her yerde, ekrandaki tüm öğeleri temizleyecektir.