javascript - 如果我调整 Canvas 大小，我的 createJS 文本会变得模糊

Question

我正在使用 createJS 在 Canvas 内绘制。我将 Canvas 设置为占据浏览器窗口，使用 resize() 函数保持宽高比。

这是代码:

    mytext = new createjs.Text("Lorem ipsum dolor sit amet 2","19px Calibri","#073949");
    mytext.x = 450
    mytext.y = 300;
    stage.addChild(mytext);  

    resize = function() {
                var canvas = document.getElementById('canvas');
                var canvasRatio = canvas.height / canvas.width;

                var windowRatio = window.innerHeight / window.innerWidth;
                var width;
                var height;

                if (windowRatio < canvasRatio) {
                    height = window.innerHeight - 35;
                    width = height / canvasRatio;
                } else {
                    width = window.innerWidth;
                    height = width * canvasRatio;
                }

                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';    
    }()

当 Canvas 调整大小时，文本会变得模糊(质量下降)。

http://i.imgur.com/RQOSajs.png 对比 http://i.imgur.com/Xwhf5c5.png

我该如何解决这个问题？

Answer 1

由于您使用的是 CreateJS，因此您可以简单地调整 Canvas 大小，并缩放整个舞台，以新的大小重新绘制所有内容:

// just showing width to simplify the example:
var newWidth = 800;
var scale = newWidth/myCanvas.width;
myCanvas.width = newWidth;
myStage.scaleX = myStage.scaleY = scale;
myStage.update(); // draw at the new size.