Если я изменю размер своего холста, мой текст createJS станет размытым

Поскольку вы используете 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.

@ Ответ Адама верен в отношении масштабирования холста. Вы НЕ хотите масштабировать с помощью CSS, так как он будет растягивать холст, а не изменять его размеры в пикселях. Вместо этого установите ширину и высоту холста с помощью JavaScript.

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

Как вы указали в своем комментарии, это изменит только размер холста, а не переместит или масштабирует ваш контент. Вам придется сделать это вручную. Это довольно просто. Как правило, я рекомендую помещать прослушиватель «resize» в JavaScript в вашем HTML-файле, а не в скрипте фрейма.

Во-первых, определите масштаб, исходя из размера окна и размера вашего контента. Вы можете использовать exportRoot.nominalBounds.width и exportRoot.nominalBounds.height, которые являются границами первого кадра. Если вы хотите масштабировать что-то другое, используйте вместо этого его nominalBounds.

Обратите внимание, что атрибут honorBounds добавляется ко всем мувиклипам, экспортируемым из Flash/Animate. Если вы включили границы нескольких кадров и хотите их использовать, вам придется изменить свой подход.

Основная идея состоит в том, чтобы использовать исходный, немасштабированный размер содержимого.

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.

Надеюсь, это поможет.

Взгляните на мой 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();

Элемент холста HTML5 работает с двумя разными размерами.

• Визуальный размер на экране, управляемый с помощью CSS, как вы устанавливаете с помощью canvas.style.width/height
• Размер пиксельного буфера для рисования, управляемый числовыми атрибутами ширины и высоты пикселя элемента холста.

Браузер растянет буфер, чтобы он соответствовал размеру экрана, поэтому, если соотношение двух значений не равно 1:1, текст будет выглядеть размытым.

Попробуйте добавить следующие строки в свой код

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

Я создал функцию для изменения размера всех элементов на экране после изменения размера холста. Он сохраняет исходные координаты и масштабы для элементов с исходной шириной 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
                }   */
            }