javascript - style - HTML5 lienzo anti-alias?

title html attribute

Question

Estoy tratando de dibujar una curva cuadrática con un lienzo. Aquí está el código:
HTML:

<canvas id="mycanvas"> 
    Your browser is not supported.
</canvas> 

JavaScript:

var canvas = document.getElementById("mycanvas");
canvas.style.width = "1000px";
canvas.style.height = "1000px";
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var x = 0,
        y = 0;
    setInterval(function() {
        ctx.lineTo(x, y);
        ctx.stroke();
        x += 1;
        y = 0.01 * x * x;
    }, 100);
}

Pero el resultado es realmente feo, primero, las líneas son demasiado gruesas, segundo, el alias es tan obvio ... ¿cómo podría mejorarlo?
Puede ver el efecto aquí: http://jsfiddle.net/7wNmx/1/

Answer 1

Lo que estás haciendo es crear un lienzo que es el tamaño predeterminado, 300 por 150, y luego escalarlo usando CSS a 1000px por 1000px. Pero escalarlo de esta manera solo aumenta el tamaño de los píxeles, no aumenta la resolución del lienzo en sí. Lo que debe hacer es configurar las dimensiones reales del lienzo utilizando los atributos de width y height :

<canvas width="1000" height="1000" id="mycanvas"> 
    Your browser is not supported.
</canvas>

Entonces, no es necesario escalarlo configurando canvas.style.width y height más.

Answer 2

Otra cosa es que estás acariciando cada vez. Así que la primera línea se dibuja más, mientras que la segunda se dibuja una vez menos, etc.

Esto también hace que se vuelva feo. Necesitarías comenzar un nuevo camino y solo trazar ese:

var canvas = document.getElementById("mycanvas");
canvas.style.width = "1000px";
canvas.style.height = "1000px";
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var x = 0,
        y = 0;
    setInterval(function() {
        ctx.beginPath();
        ctx.moveTo(x,y)
        x += 1;
        y = 0.01 * x * x;
        ctx.lineTo(x, y);
        ctx.stroke();
    }, 100);
}

Comparar:

También es más rápido ya que se realiza menos dibujo.