HINWEIS : Dies hängt damit zusammen, wie vorhandene Canvas-Elemente beim Skalieren gerendert werden , nicht damit, wie Linien oder Grafiken auf einer Canvas-Oberfläche gerendert werden . Mit anderen Worten, hat dies alles zu tun mit Interpolation von skalierten Elementen , und nichts mitzu tun , den Anti - Aliasing von Grafiken auf einer Leinwand gezogen. Es geht mir nicht darum, wie der Browser Linien zeichnet. Mir ist wichtig, wie der Browser das Canvas-Element selbst rendert,wenn es vergrößert wird.
Gibt es eine Canvas-Eigenschaft oder eine Browsereinstellung, die ich programmgesteuert ändern kann, um die Interpolation beim Skalieren von <canvas>Elementen zu deaktivieren ? Eine browserübergreifende Lösung ist ideal, aber nicht unbedingt erforderlich. Webkit-basierte Browser sind mein Hauptziel. Leistung ist sehr wichtig.
Diese Frage ist am ähnlichsten, veranschaulicht das Problem jedoch nicht ausreichend. Für das, was es wert ist, habe ich vergeblich versucht image-rendering: -webkit-optimize-contrast.
Die Anwendung wird ein "Retro" 8-Bit-Spiel sein, das in HTML5 + JS geschrieben wurde, um klar zu machen, was ich brauche.
Zur Veranschaulichung hier ein Beispiel. ( Live-Version )
Angenommen, ich habe eine 21x21 Leinwand ...
<canvas id='b' width='21' height='21'></canvas>... mit CSS, das das Element 5-mal größer macht (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
Ich zeichne ein einfaches 'X' wie folgt auf die Leinwand:
$('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();
});
Das Bild links zeigt Chrom (14.0). Das Bild rechts ist das, was ich möchte (zur Veranschaulichung handgezeichnet).
