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

时间:2015-11-30 11:05:36

标签: javascript html5-canvas



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;
&#13;
&#13;

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

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

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

3 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:-1)

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

  

Full-screen Canvas is low res

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

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