javascript - HTML5 Canvas 抗锯齿？

Question

我正在尝试用 Canvas 绘制二次曲线。这是代码:
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);
}

但是结果真的很丑，第一，线条太粗，第二，别名太明显了....我该如何改善呢？
你可以在这里看到效果: http://jsfiddle.net/7wNmx/1/

Answer 1

另一件事是你每次都在抚摸。所以第一条线画得最多，而第二条线画得少，等等。

这也导致它变得丑陋。您需要开始一条新路径，并且只抚摸那条路径:

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);
}

相比:



它也更快，因为完成的绘图更少。