SORU
4 ŞUBAT 2011, Cuma


'tek bir piksel olarak ayarlamak için en iyi yolu ne bir tuval HTML5?

HTML5 Tuval açıkça tek bir piksel ayarı için bir yöntem vardır.

Bir piksel çok kısa bir çizgi kullanarak ayarlamak mümkün olabilir, ama antialising ve çizgi caps etkileyebilir.

Başka bir yolu ImageData küçük bir nesne yaratmak için kullanıyor olabilir:

context.putImageData(data, x, y)

yere koymak için.

Herkes bu işin verimli ve güvenilir bir şekilde anlatabilir mi?

CEVAP
4 ŞUBAT 2011, Cuma


En iyi iki yarışmacının vardır:

  1. 1x1 görüntü veri oluşturmak, rengini ayarlamak ve konumda putImageData:

    var id = myContext.createImageData(1,1); // only do this once per page
    var d  = id.data;                        // only do this once per page
    d[0]   = r;
    d[1]   = g;
    d[2]   = b;
    d[3]   = a;
    myContext.putImageData( id, x, y );     
    
  2. Kullanım fillRect() bir piksel çizmek için (aliasing sorunları olmalı hayır):

    ctx.fillStyle = "rgba(" r "," g "," b "," (a/255) ")";
    ctx.fillRect( x, y, 1, 1 );
    

Bu burada hızını test edebilirsiniz: http://jsperf.com/setting-canvas-pixel
Chrome 1x1 görüntü verileri hakkında 10x(!) fillRect kullanarak hızlı olarak.
Firefox 3.6 üzerinde 1x1 sadece 1.3 x daha hızlı.
B 1x1 hakkında 80x 4.0 Firefox(!!)yavaşdaha fillRect.
Bu yavaşlama sadece donanım hızlandırma etkin olduğunda oluşur ve may be fixed.

Maksimum hız için 1x1 görüntü verileri kullanmanızı tavsiye ederiz.

Diğer, akılları alternatifler:

  • tüm tuval üzerinde getImageData()/putImageData() kullanarak; testlerde gösterildiği gibi, bu diğer seçeneklere göre yaklaşık 100 kez daha yavaş.

  • özel bir resim veri bir url kullanarak ve drawImage() Haritayı kullanarak oluşturma:

    var img = new Image;
    img.src = "data:image/png;base64,"   myPNGEncoder(r,g,b,a);
    // Writing the PNGEncoder is left as an exercise for the reader
    
  • ımg veya başka bir tuval oluşturmak istediğiniz tüm piksel ile drawImage() üzerinde istediğiniz piksel blit için kullanmak doldurdu. Bu muhtemelen çok hızlı oldu, ama önceden hesaplamak gerekir piksel için gereken sınırlama vardır.

Benim testleri ve tuval bağlam fillStyle kaydetmek için teşebbüs etmeyin; bu da fillRect performansını yavaşlatır unutmayın. Ayrıca unutmayın (test çerçevesinde sınırlamalar nedeniyle) geçmişe Sünger veya her test için piksel aynı test değilim.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AyfionGaming

    AyfionGaming

    20 ŞUBAT 2013
  • PaysNatalAu's channel

    PaysNatalAu'

    11 Aralık 2010
  • Videojug

    Videojug

    25 EKİM 2006

İLGİLİ SORU / CEVAPLAR