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

您正在做的是創建一個默認大小的畫布，300乘150，然後使用CSS將其縮放到1000 x 1000像素。但像這樣放大隻是放大像素的大小，並不會增加畫布本身的分辨率。你需要做的是設置使用width和height屬性畫布本身的實際尺寸是什麼：

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

然後，你不需要通過設置canvas.style.width和height任何更多的將其放大。

Answer 2

另一件事是，你正在撫摸每個時間。所以第一行最多，第二行少一次，等等。

這也導致它變得醜陋。你需要開始一個新的路徑和行程只有一個：

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

比較：

它也更快，因爲更少的圖紙完成。