我正在尝试用 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/
最佳答案
另一件事是你每次都在抚摸。所以第一条线画得最多,而第二条线画得少,等等。
这也导致它变得丑陋。您需要开始一条新路径,并且只抚摸那条路径:
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);
}
相比:
它也更快,因为完成的绘图更少。
关于javascript - HTML5 Canvas 抗锯齿?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6032263/