画布上的图像与视网膜显示

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";