我在这里看到了一些类似的问题,但实际上并不是我需要知道的!如何动态调整大小和居中Flash CreateJS画布元素动画
我正在使用Flash CS6并输出一个CreateJS框架动画而不是常规的.swf文件。当您从API(Flash)发布时,它会生成一个html5文档和一个外部.js文件,其中包含定义动画的实际javascript。
以下是我需要的:我希望我的动画能够全屏显示并保持纵横比 - 或 - 设置为1024x768,并且居中于浏览器窗口中,但如果在移动设备上查看,则动态调整大小以适应设备屏幕大小或视口大小并居中。
我需要的一个完美的例子是:http://gopherwoodstudios.com/sandtrap/但我没看到在这个例子中哪个代码正在做动态调整大小。
任何帮助将不胜感激。另外,我提供了Flash API的html5/js输出,因为它与其他画布相关文章中给出的示例代码看起来非常非常不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from index</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="index.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Mesh.png", id:"Mesh"},
{src:"images/Path_0.png", id:"Path_0"}
];
var loader = new createjs.PreloadJS(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.index();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
</script>
<style type="text/css">
body {text-align:center;}
#container { display:block;}
</style>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<div id="container">
<canvas id="canvas" width="1024" height="768" style="background-color:#ffffff; margin: 20px auto 0px auto;"></canvas>
</div>
</body>
</html>
再次感谢!
凹凸,凹凸! 也许我的问题太过复杂。我只需要知道如何以及在哪里(我认为)使用javascript来动态调整canvas元素的大小,使其在显示的任何屏幕上保持高宽比。 任何帮助将被认真感谢! – user11643