如何从 Flash 导出的 HTML 和 JS 中删除背景图像或颜色
Posted
技术标签:
【中文标题】如何从 Flash 导出的 HTML 和 JS 中删除背景图像或颜色【英文标题】：How can I remove a background image or color from Flash-exported HTML and JS 【发布时间】：2016-01-03 02:53:10 【问题描述】：我用 Adobe Flash CC 做了一些动画，然后用 html 和 JS 导出，但是我找不到去除背景的方法。
我看到了这个功能，但我不知道如何删除它。
这里是html：
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="Anime_V3.js"></script>
<script>
var canvas, stage, exportRoot;
function init()
canvas = document.getElementById("canvas");
images = images||;
ss = ss||;
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadFile(src:"images/Anime_V3_atlas_.json", type:"spritesheet", id:"Anime_V3_atlas_", true);
loader.loadManifest(lib.properties.manifest);
function handleFileLoad(evt)
if (evt.item.type == "image") images[evt.item.id] = evt.result;
function handleComplete(evt)
var queue = evt.target;
ss["Anime_V3_atlas_"] = queue.getResult("Anime_V3_atlas_");
exportRoot = new lib.Anime_V3();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" style="background-color:#FFFFFF"></canvas>
</body>
</html>
对此我很抱歉，但是 JS 太大了，无法放在这里，所以我把它放在 pastebin 上，这是链接：
http://pastebin.com/fvqpMChM
【问题讨论】：
【参考方案1】：我找到了一种解决方法，可以让您使用透明背景导出画布。您可以将这段代码添加到实际 Flash 文件中的第一帧：
document.getElementById("canvas").style.backgroundColor = "rgba(255,255,255,0)";
这样做的目的是在用户加载作品时以画布元素为目标，然后将画布作品的背景从您的舞台颜色更改为完全透明的白色。这应该在所有支持画布的浏览器中都能正常工作，而且每次导出时都不需要更改文件。
【讨论】：
谢谢，这对我有用。感谢您的时间和帮助:) @JoeDimaggio 很高兴我能帮上忙。 :)【参考方案2】：根据您的 FLA 的背景颜色，背景作为内联样式添加到画布中。您可以删除该属性。
<canvas id="canvas" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas" ></canvas>
请注意，如果您重新发布/导出内容，它将覆盖您的 html，因此您可能需要在发布设置中将其关闭。
【讨论】：
以上是关于如何从 Flash 导出的 HTML 和 JS 中删除背景图像或颜色的主要内容，如果未能解决你的问题，请参考以下文章
在 Fabric.js 画布上集成 Flash 动画（或派生格式）
如何将 BitmapData 从 Flash 转换为画布 HTML？