Flash Canvas 响应式动画大小答案

【问题标题】：Flash Canvas responsive animation sizeFlash Canvas 响应式动画大小
【发布时间】：2014-05-23 20:09:33
【问题描述】：

使用 Flash Canvas 构建的动画是否可以在浏览器中响应？我的意思是我希望画布和动画本身都根据浏览器窗口的大小调整自己的大小，同时保持原始纵横比。

我从发布我的画布中得到的代码如下，虽然我整天都在尝试解决这个问题，但我无法正确解决。

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.test_1();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>

和

<canvas id="canvas" width="640" height="360" style="background-color:#FFFFFF"></canvas>

有人可以帮我吗？我对 java 脚本或画布没有太多经验，而且我更新代码的尝试并没有让我走得太远。在 stackoverflow 上的另一篇文章的帮助下，我设法让我的画布响应，但动画也没有。动画只是停留在同一个地方。非常感谢您！如果有帮助，下面是使我的画布响应的代码：

<script>
var canvas, stage, exportRoot, myCanvas;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.test_1();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

    var myCanvas = document.getElementById("canvas");
    myCanvas.width = document.documentElement.clientWidth;
    myCanvas.height = document.documentElement.clientHeight;

    window.addEventListener("resize", resizeCanvas, false);

    function resizeCanvas (e) {
    var myCanvas = document.getElementById("canvas");

    myCanvas.width = document.documentElement.clientWidth;
    myCanvas.height = document.documentElement.clientHeight;
}

}
</script>

【问题讨论】：

标签： javascript html flash animation canvas

【解决方案1】：

我在 Adobe 论坛上找到了适用的解决方案。它不是 100% 完美，但它可以完成工作： https://forums.adobe.com/message/6405264

基本上只是通过 CSS 来完成，并在画布上添加 100% 的宽度，即可正确缩放画布和动画。所以你的画布看起来像这样：

<canvas id="canvas" width="720" height="660" style="background-color:#FFFFFF; width: 100%;"></canvas>

此解决方案的问题在于，虽然它会缩放画布和动画，但它不会将其缩放为矢量，因此质量可能会有所不同。在我的情况下，动画只有大约 10kb，所以我将创建大约 3 种不同大小的动画，相距 300px 以帮助解决这个问题。

一个可以帮助一些有更多 javascript 经验的人的旁注是，如果你将所有的电影剪辑和动画放在一个父级中，当你从 flash 发布它时，你会在前几行看到类似的内容.js 文件中的代码：

this.my_anim_container.setTransform(360,329.2,2,2,0,0,0,0,8.6);

2 个“2”控制动画的比例，因此如果您将它们更改为 3，例如，您的动画将被放大。根据您的浏览器大小找出一种修改方法会更好，但我个人没有 javascript 知识。

【讨论】：