2011-09-27 14 views
5
this.context.drawImage(myimage, 0, 0); 

Görüntüyü tuval üzerine koymak, tüm web üzerinde oldukça iyi bir şekilde kaplanmıştır. Ama orada olduktan sonra nasıl kaldırabilirim?Bir görüntü bir html kanvasından nasıl gizlenir, gizlenir, kaldırılır veya silinir?

+3

HTML5 kanvas, adeta gerçek bir tuval gibi hareket ettiği için adlandırılır, orada bir şeyler boyayabilir (render edebilirsiniz) ancak onu kaldıramazsınız. Bunu başka bir görüntü ile boyayabilirsiniz, bu görüntüyü oluşturan pikselleri temizleyebilir veya tuvali tamamen temizleyebilirsiniz. Bu stackoverflow yanıtı, resmin alındığı piksellerin nasıl temizlendiğini gösterir. Http://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5 – kreek

+0

Thx. Şimdi neden bu soru "[html5] [kanvas] kaldır" için arama sonuçlarında erken görünmedi? Arama sorgusuna "kaldırmayı" eklerseniz bulur, ancak konu satırının neyi bulması gerektiğine karar vermesi gerekir. –

cevap

4

Seçenek 1:
Arka planla aynı renkten bir dikdörtgen çizin.

Seçenek 2 (önemsiz olmayan arka plan çalışır, ancak daha yavaş): kanvas Get the pixel data
görüntü düşürme önce, o zaman görüntü çıkarmak için bu piksel verilerini yeniden çizmek.

+0

Canlandırılmadığı veya özellikle kaynak açması olmadığı için gerektiğinde tüm tuvali temizleyen ve yeniden çizen bir "redraw" rutini ile gittim. –

10

Tuval, hemen bir çizim yüzeyidir. Bu, üzerinde bir komut (drawImage veya fillRect) çalıştırdığınız anlamına gelir ve bu komutu yapar ve bu sadece ne yaptığını umursamaz. Bir şeyin yok edilmesi yok.

Bunu aramakta zorlandınız çünkü bir Tuval için "kaldırma" diye bir şey yoktur. Tek bildiği şey, bir yerde 'dan bazı renklerin bazı piksellerine sahip olmasıdır. Nerede olduğuna dair hiçbir fikri yok.

iki yolu genellikle vardır, biraz basitleştirmek için: Eğer çizilmiş
  • Kullanım iki tuvaller istemiyoruz birini

    1. tamamını temizle kanvas ve tek görüntüde HARİÇ her şeyin sil baştan çizmek olduğunu sadece görüntü var ve diğer her şeyle bir tane. Bu tuvali clearRect (0,0, genişlik, yükseklik) ile temizleyin ve işiniz bitti.

    Bazıları seçmeli olarak kaldırılmasını veya yeniden konumlandırılmasını istiyorsanız, muhtemelen tuval üzerine çizdiğiniz şeyleri izlemeye başlamanız gerekeceğini de 1. bölümde göreceksiniz. Nesnenin kalıcılığını artırmak ya da tuvali bir ani çizim yüzeyinden tutulan bir çizim yüzeyine dönüştürmek, çok sayıda tuval kütüphanesinin yaptığı bir şeydir. Bunu kendiniz yapmak istiyorsanız, insanların çalışmaya başlamasına yardımcı olmak için birkaç tane tutorails yazdım.

    Kitaplıklara bakmak isterseniz, easel.js numaralı telefondan bir göz atın. Oldukça öğrenilebilir.

  • 2

    Bu yüzden tuvalimi temizlemenin hızlı ve kolay bir yolunu buldum. Ben bir 0 ile <p> etiketleri benim <canvas> etiketler koymak, daha sonra her zaman benim tuval temizlendi her zamandeğiştirerek benim <p> etiketler rerendered, bir çekicilik gibi çalışır.