畫布上的圖像與視網膜顯示

Question

這是一個網絡應用程序中的電話號碼 我已經使用320×480的圖像繪製，但它模糊。

HTML

<canvas id="canvas" height=480 width=320> 
Your browser does not support the HTML5 canvas tag.</canvas> 

的JavaScript

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.drawImage(images[index],0,0,320,480); 

如何視網膜顯示器上清晰地繪製？

Answer 1

如果您有權訪問較大版本的圖像，則可以將可見分辨率加倍。

的源圖像將需要640×960：

這是代碼爲「像素雙重」的一個圖像的分辨率。

canvas.width = 640; 
canvas.height = 960; 
canvas.style.width = "320px"; 
canvas.style.height = "480px"; 

如果沒有，你可以使用相同的「像素倍增」效應，並使用現有的圖像呈現出規模較小但更清晰的版本：

canvas.width = 320; 
canvas.height = 480; 
canvas.style.width = "160px"; 
canvas.style.height = "240px";