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

【问题标题】：How to increase the resolution of lines in canvas如何提高画布中线条的分辨率
【发布时间】：2016-03-04 00:03:37
【问题描述】：

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

&lt;canvas id="canvas" style="width:100%; height:250px"&gt;&lt;/canvas&gt;

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

但它的作用是让线条变得如此粗大和糟糕，以至于你不想看到它。

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

【问题讨论】：

尝试为canvas元素设置height或者使用内联width-height属性（不是css）或者使用JavaScript

标签： javascript html5-canvas

【解决方案1】：

只要确保你的画布元素和你显示的一样大。我添加了 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();
        }
    }
}

&lt;canvas id="canvas" style="width:100%; height:250px"&gt;&lt;/canvas&gt;

【讨论】：

由于style="height: 250px" 位，它仍然很模糊，如果他使用height="250" 这不是问题，但正如您所见，他实际上只使用了5px 的差异他的画，虽然最终结果更接近25px，这意味着它仍然被拉伸，因此模糊，虽然现在不那么明显了。
哦...这我不明白为什么。为什么高度仍然被拉伸？
画布的默认高度（未设置时）为150px（来源：developer.mozilla.org/en/docs/Web/HTML/Element/canvas）。使用style（而不是实际的height属性）将其增加到250px，使其达到高度的166%，因此对其进行拉伸。
哦，我知道自然宽度/高度，我不知道样式只会将其拉伸为图像。谢谢！

【解决方案2】：

有几件事，但主要归结为：您正在以100% 的宽度进行绘制，这是拉伸您正在绘制的画布的默认大小 -这就是它模糊的原因。使用 javascript 正确设置宽度并增加清晰度。唯一的问题是，5 像素的差异几乎看不出来，因此您必须将尺寸增加到更多……平均水平。我选择了 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 -->

【讨论】：

【解决方案3】：

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

Full-screen Canvas is low res

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

因为在 css 中做的时候，你基本上是在缩放它，从而降低了分辨率，所以你必须在 html 元素中提及实际大小，而不是在 css 中缩放它。

【讨论】：