Bagaimana menghapus kanvas untuk digambar ulang

Setelah bereksperimen dengan operasi komposit dan menggambar gambar pada kanvas saya sekarang mencoba untuk menghapus gambar dan pengomposisian. Bagaimana saya melakukan ini?

Saya perlu membersihkan kanvas untuk menggambar ulang gambar lain; ini bisa berlangsung sebentar jadi saya tidak berpikir menggambar persegi panjang baru setiap kali akan menjadi pilihan yang paling efisien.

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

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

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

Ini adalah cara tercepat dan paling deskriptif untuk menghapus seluruh kanvas.

Jangan gunakan: canvas.width = canvas.width;

Menyetel canvas.widthulang semua keadaan kanvas (mis. Transformasi, lineWidth, strokeStyle, dll.), Ini sangat lambat (dibandingkan dengan clearRect), itu tidak berfungsi di semua browser, dan itu tidak menggambarkan apa yang sebenarnya Anda coba lakukan.

Berurusan dengan koordinat yang diubah

Jika Anda telah memodifikasi matriks transformasi (misalnya menggunakan scale, rotateatau translate) maka context.clearRect(0,0,canvas.width,canvas.height)kemungkinan besar tidak akan menghapus seluruh bagian terlihat dari kanvas.

Solusinya? Setel ulang matriks transformasi sebelum membersihkan kanvas:

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

Sunting: Saya baru saja melakukan beberapa profil dan (di Chrome) sekitar 10% lebih cepat untuk menghapus kanvas 300x150 (ukuran standar) tanpa mengatur ulang transformasi. Ketika ukuran kanvas Anda meningkat, perbedaan ini menurun.

Itu sudah relatif tidak signifikan, tetapi dalam banyak kasus Anda akan menggambar jauh lebih banyak daripada yang Anda kliring dan saya percaya perbedaan kinerja ini tidak relevan.

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

Jika Anda menggambar garis, pastikan Anda tidak lupa:

context.beginPath();

Kalau tidak, garis tidak akan dihapus.

Orang lain telah melakukan pekerjaan yang sangat baik untuk menjawab pertanyaan, tetapi jika clear()metode sederhana pada objek konteks akan berguna bagi Anda (bagi saya), ini adalah implementasi yang saya gunakan berdasarkan jawaban di sini:

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

Pemakaian:

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 merespons dengan baik: context.clearRect ( x , y , w , h );seperti yang disarankan oleh @ Pentium10 tetapi IE9 tampaknya sepenuhnya mengabaikan instruksi ini.
• IE9 tampaknya merespons: canvas.width = canvas.width;tetapi tidak menghapus garis, hanya bentuk, gambar, dan objek lain kecuali Anda juga menggunakan solusi @John Allsopp untuk pertama-tama mengubah lebar.

Jadi jika Anda memiliki kanvas dan konteks yang dibuat seperti ini:

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

Anda dapat menggunakan metode seperti ini:

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

Ini adalah 2018 dan masih belum ada metode asli untuk menghapus kanvas sepenuhnya untuk menggambar ulang. clearRect() tidak membersihkan kanvas sepenuhnya. Gambar jenis non-isi tidak dihapus (mis. rect())

1. Untuk menghapus kanvas sepenuhnya terlepas dari cara Anda menggambar:

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

Pro: Mempertahankan strokeStyle, fillStyle dll; Tidak ketinggalan;

Cons: Tidak perlu jika Anda sudah menggunakan beginPath sebelum menggambar apa pun

2.Menggunakan hack lebar / tinggi:

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

ATAU

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

Pro: Bekerja dengan IE Cons: Mereset strokeStyle, fillStyle menjadi hitam; Laggy;

Saya bertanya-tanya mengapa solusi asli tidak ada. Sebenarnya, clearRect()dianggap sebagai solusi garis tunggal karena sebagian besar pengguna lakukan beginPath()sebelum menggambar jalur baru. Padahal beginPath hanya digunakan saat menggambar garis dan bukan jalan tertutup sepertirect().

Ini adalah alasan mengapa jawaban yang diterima tidak menyelesaikan masalah saya dan saya akhirnya menghabiskan waktu berjam-jam untuk mencoba hack yang berbeda. Terkutuklah kamu mozilla

Gunakan metode clearRect dengan melewatkan koordinat x, y dan tinggi serta lebar kanvas. ClearRect akan menghapus seluruh kanvas sebagai:

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

ada banyak jawaban bagus di sini. satu catatan lebih lanjut adalah bahwa kadang-kadang menyenangkan hanya membersihkan sebagian kanvas. yaitu, "fade out" gambar sebelumnya alih-alih menghapusnya seluruhnya. ini dapat memberikan efek jejak yang bagus.

mudah. seandainya warna latar belakang Anda putih:

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

Cara cepat adalah melakukan

canvas.width = canvas.width

Idk cara kerjanya tetapi itu!

Inilah yang saya gunakan, terlepas dari batasan dan transformasi matriks:

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

Pada dasarnya, ini menyimpan keadaan konteks saat ini, dan menggambar piksel transparan dengan copyas globalCompositeOperation. Kemudian, pulihkan keadaan konteks sebelumnya.

Ini berfungsi untuk pieChart saya di 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

Saya telah menemukan bahwa di semua browser yang saya uji, cara tercepat adalah dengan benar-benar mengisiRect dengan warna putih, atau warna apa pun yang Anda inginkan. Saya memiliki monitor yang sangat besar dan dalam mode layar penuh clearRect sangat lambat, tetapi fillRect masuk akal.

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

Kekurangannya adalah bahwa kanvas tidak lagi transparan.

di webkit Anda perlu mengatur lebar ke nilai yang berbeda, maka Anda dapat mengaturnya kembali ke nilai awal

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

Cara sederhana, tetapi tidak terlalu mudah dibaca adalah menulis ini:

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

// after doing some rendering

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

Saya selalu menggunakan

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

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

isi kotak yang diberikan dengan nilai RGBA:
0 0 0 0: dengan Chrome
0 0 0 255: dengan FF & Safari

Tapi

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

biarkan persegi panjang diisi dengan
0 0 0 255
tidak masalah browser!

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

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

cara terpendek:

canvas.width += 0

jalan tercepat:

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

Jika Anda menggunakan clearRect saja, jika Anda memilikinya dalam bentuk untuk mengirimkan gambar Anda, Anda akan mendapatkan kiriman sebagai gantinya, atau mungkin itu dapat dihapus terlebih dahulu dan kemudian mengunggah gambar batal, jadi Anda harus menambahkan preventDefault pada awal fungsi:

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

Semoga ini bisa membantu seseorang.

Saya selalu menggunakan ini

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

CATATAN

menggabungkan clearRect dan requestAnimationFrame memungkinkan animasi yang lebih lancar jika Anda menginginkannya

Ini semua adalah contoh yang bagus tentang bagaimana Anda menghapus kanvas standar, tetapi jika Anda menggunakan paperjs, maka ini akan berhasil:

Tentukan variabel global dalam JavaScript:

var clearCanvas = false;

Dari PaperScript Anda tentukan:

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

Sekarang di mana pun Anda mengatur clearCanvas menjadi true, itu akan menghapus semua item dari layar.