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乘150，然后使用CSS将其缩放到1000px×1000px。但是将其缩放就像放大像素的大小一样，它不会增加画布本身的分辨率。您需要做的是使用width和height属性设置画布本身的实际尺寸：

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

然后您不需要再设置canvas.style.width和height来扩展它。