Ако преоразмеря своето платно, моят 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.

Отговорът на @Adam е правилен, що се отнася до мащабирането на платното. Вие НЕ искате да мащабирате с CSS, тъй като той ще разтегне вашето платно, вместо да промени размерите му в пиксели. Вместо това задайте ширината и височината на платното, като използвате JavaScript.

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

Както посочихте в коментара си, това ще промени само размера на платното, а не ще препозиционира или мащабира вашето съдържание. Ще трябва да направите това ръчно. Това е доста просто. Като цяло препоръчвам да поставите вашия слушател за „преоразмеряване“ в JavaScript във вашия HTML файл, а не в рамков скрипт.

Първо определете мащаба въз основа на размера на прозореца и размера на вашето съдържание. Можете да използвате exportRoot.nominalBounds.width и exportRoot.nominalBounds.height, които са границите на първия кадър. Ако искате да мащабирате нещо друго, използвайте неговото nominalBounds вместо това.

Имайте предвид, че nominalBounds се добавя към всички филмови клипове, експортирани от 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();

Елементът canvas HTML5 работи с два различни размера

• Визуален размер на екрана, контролиран чрез CSS, както задавате с canvas.style.width/height
• Размер на пикселния буфер за чертежа, контролиран чрез числови пикселни атрибути за ширина и височина на елемента canvas.

Браузърът ще разтегне буфера, за да пасне на размера на екрана, така че ако двете стойности не са в съотношение 1:1, текстът ще изглежда размазан.

Опитайте да добавите следните редове към вашия код

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

Създадох функция за преоразмеряване на всички елементи на екрана след преоразмеряване на платното. Той запазва първоначалните координати и мащаби за елементите с оригинална ширина от 900 px и след това ги променя според текущото съотношение на ширината спрямо първоначалното съотношение на ширината. Текстът вече не е размазан/с лошо качество.

    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
                }   */
            }