NOTBu nasıl bir ilgisi varmevcut tuval elemanları ölçekli zaman işlenir,değilçizgiler veya grafik nasıl işlenirtuval yüzeyine. Diğer bir deyişle, bu şeyle ilgisi vararadeğerlemeölçekli elemanlarıve yapacak hiçbir şey yokkan kaybediyorlarekran bir tuval üzerine çizilmiş. Tarayıcı çizgiler çizer nasıl umurumda değil; tarayıcı tuval öğesi işler nasıl önemsiyorumkendisibüyütülecektir.

<canvas> elemanları Ölçekleme zaman programlı olarak aradeğerleme devre dışı bırakmak için değiştirebilirim tarayıcı tuval ya da bir özelliği var mı? Çapraz tarayıcı çözüm ideal ama şart değildir; aynı zamanda Y-tabanlı tarayıcılar ana hedefim. Performans çok önemli.

This question en benzer ama sorun yeterince göstermez. Ne, boşuna image-rendering: -webkit-optimize-contrast denedim.

Olacak bu uygulama bir "retro" 8-bit tarzı oyun istiyorum ne açıklığa kavuşturmak HTML5 JS ile yazılmış.

Göstermek için, burada bir örnektir. (live version)

21x21 bir tuval var galiba

<canvas id='b' width='21' height='21'></canvas>

eleman 5 kat daha büyük yapar css (105x105).:

canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */

Basit bir 'X' tuval gibi . bir resim çiziyorum

$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

Solda Krom (14.0) kılan etkenlerden biri. Sağdaki resim istiyorum (elle çizilmiş açıklayıcı amaçlar için).

Son Güncelleme: 2014-09-12

Elemanları Ölçekleme zaman programlı olarak aradeğerleme devre dışı bırakmak için değiştirebilirim tarayıcı tuval ya da bir özelliği var mı?

Cevapbelki bir gün. Şimdilik, hack-alternatif yollarını istediğini almak için başvurmak Zorundasınız.

image-rendering

The working draft of CSS3 outlines a new property, image-rendering bunu istiyorum ne yapmalıyım:

Görüntü işleme özelliği sağlar bir ipucu için user-agent hakkında ne açıdan bir görüntüsü vardır en önemli korumak için zaman görüntü ölçekli, yardım user-agent olarak seçtikleri uygun bir ölçeklendirme algoritması.

Şartname üç ana hatlarıyla kabul edilen değerler: 11*,* 12*,*pixelated.

tanınmaz:

Görüntü Ölçekleme, "komşu" ya da benzer bir algoritma resmin sadece çok büyük piksel oluşmuş gibi görünmesi kullanılmalıdır. yakın Aşağı Ölçekleme yaparken, bu otomatik olarak aynıdır.

Standart? Çapraz tarayıcı?

Bu bugüne kadar sadece birçalışma taslağıbu standart haline gelecek garantisi yok. Tarayıcı desteği şu anda sivilceli, en iyisidir.

Mozilla Geliştirici Ağı ben çok okumanızı tavsiye ederim a pretty thorough page dedicated to the current state of the art vardır.

Geliştiriciler başlangıçta 25 ** ama/Krom Krom için seçti Y bunu uygulayan Y bir sürümünü kullanıyor gibi görünmüyor.

Güncelleme: 2014-09-12

Chrome 38 now supports image-rendering: pixelated!

Firefox image-rendering: pixelated uygulamaya almak bug report bir açık vardır, ama -moz-crisp-edges şimdi için çalışıyor.

Çözüm?

En çapraz platform, CSS-tek çözüm, şimdiye kadar bu nedenle

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0                        */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02 ) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

Ne yazık ki bu alışkanlık tüm büyük HTML5 platformlarında henüz (özellikle Krom).

Elbette, kimse elle büyütmek görüntüleri kullanarak en yakın komşu ilişkilendirme üzerine yüksek çözünürlüklü tuval yüzeylerde javascript, hatta pre-ölçekli görüntüler sunucu tarafında, ama benim durumumda bu olacak forbiddingly pahalı öyle değil uygulanabilir bir seçenek.

ImpactJS bir doku ön Ölçekleme tekniği tüm bu FUD kurtulmak için kullanır. Etki geliştirici, Dominic Szablewski, wrote a very in-depth article about this (o bile yaptığı araştırma bu soruya gerekçe göstererek sona erdi).

imageSmoothingEnabled özelliği kullanan tuval tabanlı bir çözüm (eski tarayıcılarda kullanılabilir, ama ön-Ölçekleme daha basit ve oldukça yaygın olarak desteklenmiyor) Simon's answer bkz.

Demo Canlı

İstersen test etmek için CSS özellikleri tartışıldığı MDN Madde canvas elementler, yaptım this fiddle bir görüntü gibi bir şey bu, bulanık ya da değil, bağlı tarayıcı: