Aggiorna l'app per canvas non retina sul display retina

Question

Ho un'app per iPad 2 (gioco) e vorrei farla funzionare sul nuovo display retina iPad.

In poche parole, qual è il metodo migliore per allungare/restringere la mia immagine iPad2 per i modelli di iPad retina?

Dal googlato che ho fatto, ho visto vari metodi, ma molti includono iniziando con le immagini della retina e il ridimensionamento fatto.

Ho sentito anche le prestazioni di spingere pixel di dimensioni di qualità retina allo schermo è lenta, e che è meglio utilizzare immagini in formato iPad a scapito di una certa qualità.

Come è in questo momento, sul nuovo iPad vedo il quarto in alto a sinistra della mia app, che ha un senso, ma le prestazioni sono scioccante rispetto a iPad 2.

tecniche che ho visto includere media query CSS , usando la densità dei pixel e le trasformazioni CSS - che sono apparentemente abbastanza veloci.

Grazie

Answer 1

Ho messo insieme una semplice funzione per gestire questo problema. Fondamentalmente, prende le dimensioni attuali del canvas e le ridimensiona in base al rapporto pixel del dispositivo, riducendole di nuovo usando CSS. Quindi ridimensiona il contesto in base al rapporto in modo che tutte le tue funzioni originali funzionino come al solito.

Si può fare un tentativo e vedere come le tariffe di prestazioni. Se non è quello che speravi, puoi semplicemente rimuoverlo.

function enhanceContext(canvas, context) { 
    var ratio = window.devicePixelRatio || 1, 
     width = canvas.width, 
     height = canvas.height; 

    if (ratio > 1) { 
     canvas.width = width * ratio; 
     canvas.height = height * ratio; 
     canvas.style.width = width + "px"; 
     canvas.style.height = height + "px"; 
     context.scale(ratio, ratio); 
    } 
}