Question

我正在使用createJS在画布内绘制。我的画布设置为使用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';    
    }()

当画布调整大小时，文本会变得模糊（质量下降）。

http://i.imgur.com/RQOSajs.png VS http://i.imgur.com/Xwhf5c5.png

我该如何解决这个问题？

Answer 1

@ Adam的答案是正确的，只要缩放画布。您 NOT 想要使用CSS进行缩放，因为它会拉伸画布而不是更改其像素尺寸。使用JavaScript设置画布的宽度和高度。

stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;

正如您在评论中所述，这只会更改画布大小，而不会重新定位或缩放您的内容。您必须手动执行此操作。这很简单。通常，我建议将“调整大小”侦听器放在HTML文件中的JavaScript中，而不是放在帧脚本上。

首先，根据窗口大小和内容大小确定比例。您可以使用exportRoot.nominalBounds.width和exportRoot.nominalBounds.height这是第一帧的边界。如果您想扩展其他内容，请改用其nominalBounds。

请注意，nominalBounds会附加到从Flash / Animate导出的所有MovieClip。如果启用多帧边界并想要使用它们，则必须修改方法。

主要思想是使用原始的，未缩放的内容大小。

var bounds = exportRoot.nominalBounds;
// Uses the larger of the width or height. This will "fill" the viewport.
// Change to Math.min to "fit" instead.
var scale = Math.max(window.innerWidth / bounds.width, window.innerHeight / bounds.height);
exportRoot.scaleX = exportRoot.scaleY = scale;

如果你愿意，你可以将它居中。

exportRoot.x = *window.innerWidth - bounds.width*scale)/2;
exportRoot.y = *window.innerHeight - bounds.height*scale)/2;

以下是使用简单形状作为缩放内容的响应式画布的快速示例： http://jsfiddle.net/lannymcnie/4yy08pax/

使用Flash / Animate CC导出这样做了几次，所以我的未来EaselJS演示列表列在createjs.com和EaselJS GitHub中。

我希望这会有所帮助。

Answer 2

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

// 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.

Answer 3

看看我的jsfiddle：https://jsfiddle.net/CanvasCode/ecr7o551/1/

基本上，您只需存储原始画布大小，然后使用它来计算新的位置和大小

HTML

<canvas id="canvas" width="400" height="400">
    Canvas was unable to start up.
</canvas>

<button onclick="resize()">Click me</button>

的javascript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var originalWidth = canvas.width;
var originalHeight = canvas.height;

render = function()
{
    context.fillStyle = "#DDD";
    context.fillRect(0,0, originalWidth * (canvas.width / originalWidth), originalHeight * (canvas.height / originalHeight));

    context.fillStyle = "#000";
    var fontSize = 48 * (canvas.width / originalWidth);
    context.font = fontSize+"px serif";
    context.fillText("Hello world", 100 * (canvas.width / originalWidth), 200 * (canvas.height / originalHeight));   
}

resize = function()
{
    canvas.width = 800;
    canvas.height = 600;
    render();
}

render();

Answer 4

HTML5 canvas元素使用两种不同的大小

屏幕上的视觉大小，通过CSS控制，就像您使用canvas.style.width / height
绘图的像素缓冲区大小，通过canvas元素上的数字宽度和高度像素属性控制。

浏览器将拉伸缓冲区以适应屏幕上的大小，因此如果两个值不是1：1，则文本看起来会模糊。

尝试在代码中添加以下行

canvas.width = width;
canvas.height = height;

Answer 5

我在调整画布大小后创建了一个调整屏幕上所有元素大小的函数。它保存原始宽度为900像素的元素的初始坐标和比例，然后根据当前宽度比相对于原始宽度比更改它们。文字不再模糊/质量差。

    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;
                width = height / canvasRatio;
            } else {
                width = window.innerWidth;
                height = width * canvasRatio;
            }

            canvas.width = width;
            canvas.height = height;
            reziseElements();

        };


    reziseElements = function()
            {
                var canvrat = canvas.width / 900;

                 //Simplified
                stage.scaleX = stage.scaleY = canvrat;

                //Old Version
                /*for (i=0; i<stage.numChildren ;i++)
                {
                    currentChild = stage.getChildAt(i);

                    if (typeof currentChild.oscaleX == 'undefined')
                    {
                        currentChild.oscaleX = currentChild.scaleX;
                        currentChild.ox = currentChild.x;
                        currentChild.oy = currentChild.y;
                    }
                }   


                for (i=0; i<stage.numChildren ;i++)
                {
                    currentChild = stage.getChildAt(i);
                    currentChild.scaleX = currentChild.scaleY = currentChild.oscaleX * canvrat      
                    currentChild.x = currentChild.ox * canvrat
                    currentChild.y = currentChild.oy * canvrat
                }   */
            }

如果我调整画布大小，我的createJS文本会变得模糊

5 个答案: