如何提高 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

有几件事，但主要归结为：您以 100% 的宽度绘图，这是拉伸默认大小a canvas 你正在画画 - 这就是它模糊的原因。使用 javascript 正确设置宽度，清晰度会增加。唯一的问题是，5 个像素的差异几乎无法察觉，因此您必须将尺寸增加到更......平均水平。我选择了 windows 宽度的 1/100，但你可以将它变成任何东西。

// 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);

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

Answer 2

只需确保您的 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>

Answer 3

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

Full-screen Canvas is low res

基本上它总结了，而不是在 css 中设置高度和宽度，你应该通过 html（在 canvas 元素内通过宽度和高度属性）或通过javaScript.

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

如何提高 canvas 中线条的分辨率

How to increase the resolution of lines in canvas

javascript

html5-canvas