HTML5画布抗锯齿？

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/

- wong2

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

比较:

此外，由于绘制的内容更少，所以速度更快。

- pimvdb

---

没错，这是另一个问题。找得好！从我们两人的回答来看，它看起来好多了。 - Brian Campbell

Answer 2

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

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

那么您就不需要再通过设置canvas.style.width和height来对其进行放大。

- Brian Campbell

---

还不够美观。贝塞尔曲线可能会有用（动画会不同）：http://www.robodesign.ro/coding/canvas-primer/20081208/example-paths.html - Rudie

这解决了使用CSS调整大小的问题，但我的项目需要在画布容器div中进行相对大小调整，而不是硬编码像素大小。以下问题有助于通过百分比进行调整：https://dev59.com/2mMl5IYBdhLWcg3wHjxO - jacob