Pertanyaan piksel yang jelas di bawah bentuk dalam kanvas HTML


Saya menggunakan kanvas HTML dan javascript dan saya harus menghapus semua piksel di bawah bentuk yang dibuat dengan menutup jalur (misalnya, saya menggunakan flot, dan saya ingin membuat sudut bulat, dan untuk melakukan ini, saya harus terlebih dahulu menghapus sudut persegi dengan menggambar kurva di atas sudut untuk menghapus piksel yang diinginkan).

Saat ini, saya melakukan ini dengan hanya mengisi bentuk dengan warna yang sama dengan latar belakang, yang dapat meniru apa yang ingin saya lakukan, tetapi, itu tidak ideal karena tidak memungkinkan untuk menempatkan grafik di atas yang tidak padat. latar belakang tanpa melihat sudut persegi. Saya tahu bahwa ada metode clearRect yang akan melakukan apa yang ingin saya lakukan, tetapi dengan hanya persegi panjang, saya harus melakukannya dengan bentuk tertutup apa pun. Apakah mungkin, dan jika demikian, bagaimana saya melakukannya?


5
2018-06-21 20:21


asal


Jawaban:


kode brainjam sedang menuju ke arah yang benar, tetapi tidak sepenuhnya memecahkan masalah. Berikut solusinya:

context.save();
context.globalCompositeOperation = 'copy';
context.fillStyle = 'rgba(0,0,0,0)';
//draw shape to cover up stuff underneath
context.fill();
context.restore();

6
2018-06-22 18:08



Saya pikir yang Anda inginkan adalah a wilayah kliping, ditentukan oleh fungsi klip (). Yang terakhir mengambil banyak jalur. Ini sebuah contoh.

Ini sedikit berbeda dari apa yang Anda minta secara khusus (yang menghapus piksel setelah menggambarnya), tetapi sebenarnya tidak menggambar piksel di tempat pertama mungkin lebih baik, jika saya memahami persyaratan Anda dengan benar.

Edit: Saya sekarang berpikir saya mengerti bahwa apa yang ingin Anda lakukan adalah piksel yang jelas menjadi hitam transparan. Untuk melakukan itu, setelah menentukan jalur Anda, lakukan sesuatu seperti ini:

context.fillStyle = 'rgba(0,0,0,0)';
context.fill();

Pernyataan pertama mengatur warna isian ke hitam transparan.


4
2018-06-21 20:39



Menggunakan globalCompositeOperation = 'destination-out' dari pada 'copy', itu akan menghapus semua piksel dari bentuk di kanvas.

Lihat semua jenis komposisi sini

sangat berguna !


3
2017-07-29 21:33



Berikut ini contoh fungsi yang akan menghapus lingkaran dari kanvas:

var clearCircle = function(x, y, radius)
{
    context.save();
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.restore();
};

3
2017-10-15 14:01