Question

这是一个在phonegap中的网络应用程序我使用了320 x 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

如果您可以访问较大版本的图片，则可以将可见分辨率加倍。

源图像需要为640x960：

这是“像素加倍”图像分辨率的代码。

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

Answer 2

这是关于如何在画布上绘制（任何东西）以使其在视网膜显示器或任何高 DPI 显示器上看起来清晰的一般答案。

获取屏幕密度：

var screenDensity = window.devicePixelRatio

然后只需将您的路径、笔画、字体大小、画布大小等与 screenDensity 相乘。

示例：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var screenDensity = window.devicePixelRatio;

// Make it visually fill the positioned parent
canvas.style.width = '100%';
canvas.style.height = '100%';
// ...then set the internal size to match
canvas.width = canvas.offsetWidth * screenDensity;
canvas.height = canvas.offsetHeight * screenDensity;

ctx.beginPath();
ctx.moveTo(42 * screenDensity, 0);
ctx.lineTo(42 * screenDensity, 4 * screenDensity);
// (...more stuff goes here...)
ctx.closePath();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2 * screenDensity;
ctx.stroke();

或者，您可以将画布 scale 设置为 screenDensity。有关更多信息和示例，请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

使用Retina显示在画布上绘制图像

2 个答案:

这是关于如何在画布上绘制（任何东西）以使其在视网膜显示器或任何高 DPI 显示器上看起来清晰的一般答案。