HTML5 画布抗锯齿?

2022-01-17 00:00:00 javascript html5-canvas

我正在尝试用画布绘制二次曲线.这是代码:
HTML:

I'm trying to draw a quadratic curve with canvas. Here is the code:
HTML: 

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

JavaScript:

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/

But the result is really ugly, first, the lines are too thick, second, the alias is so obvious.... how could I improve it?
You can see the effect here: http://jsfiddle.net/7wNmx/1/

推荐答案

您正在做的是创建一个默认大小为 300 x 150 的画布，然后使用 CSS 将其放大到 1000 x 1000 像素.但是像这样放大它只会放大像素的大小，并不会增加画布本身的分辨率.您需要做的是使用 width 和 height 属性设置画布本身的实际尺寸:

What you're doing is creating a canvas which is the default size, 300 by 150, and then scaling it up using CSS to 1000px by 1000px. But scaling it up like that just magnifies the size of the pixels, it doesn't increase the resolution of the canvas itself. What you need to do is set the actual dimensions of the canvas itself using the width and height attributes:

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

那么你就不需要再设置canvas.style.width和height了.

Then you don't need to scale it up by setting canvas.style.width and height any more.

相关文章