Pertanyaan Cara membersihkan kanvas untuk menggambar ulang


Setelah bereksperimen dengan operasi komposit dan menggambar gambar di 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 untuk sementara waktu jadi saya tidak berpikir menggambar persegi panjang baru setiap kali akan menjadi pilihan yang paling efisien.


787
2018-01-26 20:50


asal


Jawaban:


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

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

971
2018-01-26 20:52



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

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

Jangan gunakan: canvas.width = canvas.width;

Ulang canvas.width menyetel ulang semua keadaan kanvas (misalnya transformasi, lineWidth, strokeStyle, dll.), sangat lambat (dibandingkan dengan clearRect), tidak berfungsi di semua browser, dan tidak menggambarkan apa yang sebenarnya Anda coba lakukan.

Berurusan dengan koordinat yang berubah

Jika Anda telah memodifikasi matriks transformasi (mis. Menggunakan scale, rotate, atau translate) kemudian context.clearRect(0,0,canvas.width,canvas.height) kemungkinan besar tidak akan membersihkan seluruh bagian yang terlihat dari kanvas.

Solusinya? Setel ulang matriks transformasi sebelum mengosongkan 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();

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

Itu sudah relatif tidak signifikan, tetapi dalam banyak kasus Anda akan menggambar lebih dari Anda membersihkan dan saya percaya perbedaan kinerja ini tidak relevan.

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

661
2017-07-17 05:06



Jika Anda menggambar garis, pastikan Anda tidak lupa:

context.beginPath();

Kalau tidak, garisnya tidak akan dibersihkan.


189
2018-01-13 07:12



Orang lain telah melakukan pekerjaan luar biasa menjawab pertanyaan tetapi jika sederhana clear() metode pada objek konteks akan berguna untuk Anda (itu untuk 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
};

107
2018-03-15 15:05



  • Chrome menanggapi dengan baik untuk: 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 jelas garis, hanya bentuk, gambar dan objek lain kecuali Anda juga menggunakan solusi @John Allsopp untuk mengubah lebar terlebih dahulu.

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

33
2017-11-03 09:48



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

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

18
2017-11-13 06:08



ada banyak sekali jawaban yang bagus di sini. satu catatan lebih lanjut adalah kadang-kadang menyenangkan untuk hanya menghapus sebagian kanvas. yaitu, "memudarkan" gambar sebelumnya, bukannya menghapusnya sepenuhnya. ini dapat memberikan efek trails yang bagus.

mudah. mengandaikan 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);

13
2018-05-04 04:36



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


4
2017-08-02 04:50



Saya telah menemukan bahwa di semua browser yang saya uji, cara tercepat adalah 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 kanvas tidak lagi transparan.


4
2018-03-25 22:29



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

4
2018-04-11 11:39



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

4
2018-02-26 12:36