HTML5画布抗锯齿？
HTML5画布抗锯齿？
提问于 2011-05-17 22:22:48
我正试着用画布画一条二次曲线。代码如下：
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/
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-05-17 22:31:18
您要做的是创建一个默认大小为300 x 150的画布，然后使用CSS将其放大到1000px x 1000px。但是像这样放大它只会放大像素的大小，而不会增加画布本身的分辨率。您需要做的是使用width和height属性设置画布本身的实际尺寸：
<canvas width="1000" height="1000" id="mycanvas">
Your browser is not supported.
</canvas>这样你就不再需要通过设置canvas.style.width和height来扩展它了。
Stack Overflow用户
发布于 2011-05-17 22:36:03
另一件事是你每次都在划水。所以第一条线画得最多，而第二条线画得少一次，以此类推。
这也会导致它变得丑陋。你需要开始一条新的路径，并且只画那一条：
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);
}比较：
这也是更快，因为更少的绘图完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6032263
复制相关文章
相似问题