画布绘图和视网膜显示：可以吗？ [英] Canvas drawing and Retina display: doable?

问题描述

使用phoneGap使用Canvas实现绘图。我们遇到的catch是canvas需要特定的像素尺寸。这是很好，除了iPhone 4的Retina显示，从CSS / Webkit POV仍然320像素宽，即使技术上有640实际屏幕像素。

Working with phoneGap implementing drawing with Canvas. The catch we've run into is that canvas expects specific pixel dimensions. This is fine except that the iPhone 4's Retina display, from a CSS/Webkit POV is still 320px wide, even though technically there are 640 actual screen pixels.

推荐答案

我最后一次坐在同一个问题上周发现了如何解决它 -

I sat with the same problem last week and discovered how to solve it -

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演示

这篇关于画布绘图和视网膜显示：可以吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！