NOTA : ciò ha a che fare con il modo in cui vengono renderizzati gli elementi di tela esistenti quando vengono ingranditi , non con il modo in cui le linee o la grafica vengono renderizzate su una superficie di tela . In altre parole, questo ha tutto a che fare con l' interpolazione di elementi in scala e nulla a che fare con l' antialiasing della grafica disegnata su una tela. Non mi preoccupo di come il browser disegna le linee; Mi interessa il modo in cui il browser esegue il rendering dell'elemento canvas stesso quando viene ridimensionato.
Esiste una proprietà canvas o un'impostazione del browser che posso modificare a livello di codice per disabilitare l'interpolazione durante il ridimensionamento degli <canvas>elementi? Una soluzione cross-browser è l'ideale ma non essenziale; I browser basati su Webkit sono il mio obiettivo principale. Le prestazioni sono molto importanti.
Questa domanda è molto simile ma non illustra sufficientemente il problema. Per quello che vale, ho provato image-rendering: -webkit-optimize-contrastinutilmente.
L'applicazione sarà un gioco "retrò" in stile 8 bit scritto in HTML5 + JS per chiarire ciò di cui ho bisogno.
Per illustrare, ecco un esempio. ( versione live )
Supponiamo che io abbia una tela 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... che ha CSS che rende l'elemento 5 volte più grande (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
Traccio una semplice 'X' sulla tela in questo modo:
$('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();
});
L'immagine a sinistra è ciò che rende Chromium (14.0). L'immagine a destra è ciò che voglio (disegnato a mano a scopo illustrativo).
