如何增加線的分辨率在畫布

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>

如果你運行上面的代碼，然後在鋸齒形圖案線條的分辨率中，如果不錯，但在這裏，你可以看到圖像這種模式的resoultion很差（請點擊此圖片查看這個問題）：我曾嘗試是我不變的情況(window.innerWidth)/10到(winodw.innerWidth)/4和x+=5到x+=2

但它所做的是讓線條變得如此厚重和不好以至於你不想看到它。

那麼，我該怎麼做才能增加模式線條的分辨率呢？

來源

2015-11-30 anni saini

嘗試使用內聯'width-height'屬性（非css）或使用'JavaScript'來設置'canvas'元素的'width'＆'height' – Rayon

謝謝 –

只要確保你的畫布元素是一樣大，你顯示它。我增加了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>

來源

2015-11-30 11:59:26 AndreaBogazzi

由於'style =「的原因，它仍然很模糊。如果他使用了height =「250」，那麼它的高度：250px「這不是問題，但正如你所看到的，他實際上在他的圖畫中使用了只有5px的差異，最終結果是'25px'，這意味着它仍然被拉伸，因此模糊，儘管現在不那麼明顯。 – somethinghere

哦......這我不明白爲什麼。爲什麼身高還在拉長？ – AndreaBogazzi

畫布的默認高度（未設置時）爲150px（來源：https：//developer.mozilla.org/en/docs/Web/HTML/Element/canvas）。使用'style'（而不是實際的'height'屬性）將其增加到'250px'使其達到高度的166％，從而擴展它。 – somethinghere

有一對夫婦的事情，但大多歸結到這一點：你的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 -->

來源

2015-11-30 11:17:40 somethinghere

-1

也許你可以找到你這裏ANS

Full-screen Canvas is low res

基本上它總結了，而不是在CSS設置高度和寬度，你應該設置它通過html（在canvas元素中通過寬度和高度attr）或通過javaScri PT。

因爲在css中執行它時，基本上會縮放它，從而降低分辨率，所以您必須在html元素中提及實際大小，而不是在css中對其進行縮放。

來源

2017-10-04 11:58:45

如何增加線的分辨率在畫布

回答

相關問題