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.