javascript - 如何提高 Canvas 中线条的分辨率

Question

window.onload=function(){
    var c = document.getElementById('canvas'),
        ctx = c.getContext('2d'),
        x=0, y=0, cnt=1;
    for(var i=0;i<(window.innerWidth)/10;i++){
        ctx.moveTo(x, y); x+=5;
        if(cnt%2){
            y=5; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }else{
            y=0; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }
    }
}

<canvas id="canvas" style="width:100%; height:250px"></canvas>

如果您运行上面的代码，那么锯齿形图案中线条的分辨率如果很好，但在这里您可以看到图像，该图案的分辨率非常差(请单击此图像以查看此问题): 我尝试过的是，我已将条件 (window.innerWidth)/10 更改为 (winodw.innerWidth)/4 和 x+=5 > 到 x+=2

但它的作用是使线条变得又粗又糟糕，以至于你不想看到它。

那么，我应该怎样做才能提高图案线条的分辨率呢？

Answer 1

只需确保您的 Canvas 元素与您显示的一样大。我添加了 c.width = windows.innerWidth 和 c.heigth = 250，现在分辨率看起来是正确的。

window.onload=function(){
    var c = document.getElementById('canvas'),
        ctx = c.getContext('2d'),
        x=0, y=0, cnt=1;
        c.width = window.innerWidth;
        c.height = 250;
    for(var i=0;i<(window.innerWidth);i++){
        ctx.moveTo(x, y); x+=5;
        if(cnt%2){
            y=5; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }else{
            y=0; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }
    }
}

<canvas id="canvas" style="width:100%; height:250px"></canvas>