Question

＆＃13;

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

＆＃13;

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

＆＃13;

如果你运行上面的代码然后在Zig-zag模式中的行的分辨率如果正常但在这里你可以看到图像这个模式的resoultion非常差（请点击此图片查看这个问题）：我试过的是我已将条件(window.innerWidth)/10更改为(winodw.innerWidth)/4而x+=5更改为x+=2

但它的作用是它使得线条如此厚实和糟糕，以至于你不想看到它。

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

Answer 1

有几件事情，但主要归结为：你的宽度为100%，拉伸您正在绘制的画布的默认大小在 - 这就是为什么它模糊。使用javascript正确设置宽度，锐度增加。唯一的问题是，5像素的差异几乎不可察觉，因此您必须将您的尺寸增加到更多......平均值。我选择了1/100的窗口宽度，但你可以把它变成任何东西。

＆＃13;

// For safety, use event listeners and not global window method overwriting.
// It will become useful if you have multiple scripts you want to
// execute only after loading them!
window.addEventListener('DOMContentLoaded', function(){
    var c = document.getElementById('canvas'),
        ctx = c.getContext('2d'),
        x = 0, y = 0;
    // Set the correct width and height
    c.width = window.innerWidth;
    c.height = window.innerWidth / 100;
    // Use moveTo once, then keep drawing from your previous lineTo call
    ctx.moveTo(x, y);
    // You only need your x value here, once we are off screen we can stop drawing and end the for loop!
    for(; x < window.innerWidth; x += window.innerWidth / 100){
        // Use lineTo to create a path in memory
        // You can also see if your y needs to change because y = 0 = falsy
        ctx.lineTo(x, (y = y ? 0 : window.innerWidth / 100));
    }
    // Call stroke() only once!
    ctx.stroke();
    // And for safety, call closePath() as stroke does not close it.
    ctx.closePath();
}, false);

＆＃13;

<canvas id="canvas"></canvas>
<!-- Remove all styling from the canvas! Do this computationally -->

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

也许你可以在这里找到你的答案

Full-screen Canvas is low res

基本上它总结了不是在css中设置高度和宽度，而是应该通过html（在canvas元素中通过width和height attr）或通过javaScript设置它。

因为在css中执行此操作时，基本上是缩放它并因此降低分辨率，因此您必须在html元素中提及实际大小而不是在css中缩放它。

如何提高画布中线条的分辨率

3 个答案: