【问题标题】:Draw image on canvas with the Retina display使用 Retina 显示屏在画布上绘制图像
【发布时间】:2013-07-11 02:06:11
【问题描述】:

它是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);

如何在 Retina 显示屏上清晰地绘制?

【问题讨论】:

    标签: ios html canvas cordova retina-display


    【解决方案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";
    

    【讨论】:

    • MarkE 是对的,只是不要忘记调整你的输入值,它们是相对于视网膜大小的!
    【解决方案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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-02-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-18
      • 2013-09-13
      • 2012-10-27
      • 2018-12-09
      相关资源
      最近更新 更多