0

我正在使用来自http://kaioa.com/node/103的 renderToCanvas 函数：

var renderToCanvas = function (width, height, renderFunction) {
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};

它在标准 dpi 设备上运行良好，但是当我尝试在 hiDpi 显示器上使用我的 renderToCanvas 缓冲区时，它们显得模糊。

例如：

m_cachedGraphics = renderToCanvas( width, height, function (ctx)
    {
        ctx.fillStyle="rgba("+0+","+0+","+0+","+(1.0)+")";
        ctx.font="14px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText( “Test1”, 100, 100 );
    }
);

下面是我的 draw() 函数，我还设置了 hiDpi 显示：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
if(window.devicePixelRatio == 2)
{
    canvas.setAttribute('width', m_canvasWidth * 2);
    canvas.setAttribute('height', m_canvasHeight * 2);
    ctx.scale(2, 2);
}
ctx.drawImage( m_cachedGraphics, 0, 0 );

ctx.fillStyle="rgba("+0+","+0+","+0+","+(1.0)+")";
ctx.font="14px Arial";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText( “Test2”, 100, 200 );

在 hiDpi 显示器上，Test1 显得模糊，而 Test2 显得清晰。

我试图修改 renderToCanvas 以以 hiDpi 分辨率绘制缓存缓冲区（Test1），但无济于事。

任何人都可以帮忙吗？

谢谢。

解决方案：

下面的 GameAlchemist 有正确的答案。通过在调用 ctx.drawImage 之前调用 ctx.scale(0.5,0.5) 来缩放图像会使“Test1”看起来像“Test2”一样清晰。不过，这似乎只在绘制图像时才需要。我添加了以下帮助功能：

function DrawCachedImage( ctx, cachedImage, pixelRatio, x, y )
{
    ctx.save();
    {
        ctx.scale( pixelRatio, pixelRatio );
        ctx.drawImage( cachedImage, x, y );
    }
    ctx.restore();
}

现在我没有调用 ctx.drawImage 而是调用：

//ctx.drawImage( m_cachedBuildUI, 0, 0  );
DrawCachedImage( ctx, m_cachedBuildUI, 1/window.devicePixelRatio, 0, 0 );
4

0 回答 0