画布绘图和Retina显示:可行吗？

Question

使用phoneGap使用Canvas实现绘图.我们遇到的问题是画布需要特定的像素尺寸.这很好,除了iPhone 4的Retina显示器,来自CSS/Webkit POV仍然是320px宽,即使技术上有640个实际的屏幕像素.

无论如何使用Canvas on Webkit来容纳视网膜显示器,同时保持与非视网膜显示器的兼容性？

Answer 1

我上周遇到了同样的问题并发现了如何解决它 -

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth;
    canvas.style.height = canvasHeight;

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

关于gist的完整代码,关于jsfiddle的演示