javascript - HTML5 画布抗锯齿？

Question

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

比较：

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

Answer 2

您正在做的是创建一个默认大小为 300 x 150 的画布，然后使用 CSS 将其放大到 1000 像素 x 1000 像素。但是像这样放大它只会放大像素的大小，并不会增加画布本身的分辨率。您需要做的是使用width和height属性设置画布本身的实际尺寸：

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

然后你不需要通过设置canvas.style.width等来扩大它height。