HIDPI/Retina绘图？

Question

在过去的一年里，我在bitbucket上见过3张票询问这个问题，但从未见过一个明确的答案。

这些票的一给出了一些代码，但我不知道该代码属于哪里。

var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;

ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
this.canvasOrigWidth = oldWidth;
this.canvasOrigHeight = oldHeight;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;

canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';

// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
ctx.scale(ratio, ratio);
}

如何让JQPlot输出高分辨率的图形？

编辑1上面的代码似乎来自于这个网站。

Answer 1

我根据问题中的例子找出了答案。

替换

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }
    return canvas;
}

使用

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }

    var cctx = canvas.getContext('2d');

    var canvasBackingScale = 1;
    if (window.devicePixelRatio > 1 && (cctx.webkitBackingStorePixelRatio === undefined || 
                                                cctx.webkitBackingStorePixelRatio < 2)) {
            canvasBackingScale = window.devicePixelRatio;
    }
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = canvasBackingScale * canvas.width;
    canvas.height = canvasBackingScale * canvas.height;
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    cctx.save();

    cctx.scale(canvasBackingScale, canvasBackingScale);

    return canvas;
};

这种方法可以在jquery.jqplot.js中的第290号线附近找到。

然后，如果您没有HIDPI或Retina显示器，但是有Mac，则可以使用Quartz Debug和System / display模拟HIDPI分辨率进行测试。下面是一个显示普通图形和替换代码的相同图形的复合屏幕截图。

​