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

问题描述

与 phoneGap 一起使用 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.

有没有办法在 Webkit 上使用 Canvas 来适应视网膜显示，同时保持与非视网膜显示的兼容性?

Is there anyway to accommodate the retina display using Canvas on Webkit while preserving compatibility with non-retina displays?

推荐答案

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

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 + "px";
    canvas.style.height = canvasHeight + "px";

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

要点的完整代码、jsfiddle 上的演示

这篇关于画布绘图和 Retina 显示:可行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！