HTML5 kanvas antidiyaları devre dışı bırakabilir ilkel (eğriler, ...)

Question

Aşağıdaki kodda antialias etkisini nasıl devre dışı bırakabilirim? Ben maalesef bir tuval üzerinde çizim yaparken düzgünleştirme devre dışı bırakmak için hiçbir taşınabilir yolu yoktur

var canvas = document.getElementById('test'); 
var context = canvas.getContext('2d'); 

// These lines don't change anything 
context.mozImageSmoothingEnabled = false; 
context.webkitImageSmoothingEnabled = false; 
context.imageSmoothingEnabled = false; 

context.beginPath(); 
context.arc(100, 100, 100, 0, Math.PI * 2, true); 
context.closePath(); 

context.fillStyle = 'red'; 
context.fill(); 

Answer 1

imageSmoothingEnabled sadece görüntüleridrawImage() (dolayısıyla adı görüntü SmoothingEnabled) kullanarak tuval çizilmiş etkiler. Çizgiler ve şekiller için bunu devre dışı bırakmanın hiçbir yolu yoktur.

6502'nin cevabı ve SO'daki önceki cevaplarda olduğu gibi, bunu başarmak için "düşük seviyeli" yöntemleri uygulamanız gerekir. İşte

çeşitli ilkel için bazı ortak algoritmalara bazı bağlantılar:

• Bresenham line algorithm (see this answer for implementation)
• Midpoint circle algorithm (ve ellipse with the same) Here's an implementation.
• Bezier curve (implementation at CodeProject)

Bunu uygulamak için gereken yolu x elde etmektir ve y bu formüllerden koordine eder. Ardından, rect(x, y, 1, 1)'u kullanmanız veya doğrudan görüntü veri arabelleğini değiştirerek bir piksel ayarlamanız gerekir. İkincisi, bu tür şeyler için daha hızlı olma eğilimindedir.

Her iki durumda da, tarayıcının dahili derlenmiş yinelemesine karşı JavaScript kullanarak yinelemeniz gerektiğinden, göreceli olarak büyük bir performans düşüşünüz olacaktır.

Answer 2

Krom 29.

JSFiddle here kullanıyorum.

Bulduğum tek çözüm, görüntü verilerinin üzerine doğrudan yazı yazan ilkel grafiklerin yeniden oluşturulmasıdır.