createjs html5画布集成不起作用
问题描述:
我试图将w3school html5画布与flash导出createjs集成 我刚刚在createjs输出内添加了这段代码。createjs html5画布集成不起作用
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
但它显示没有错误。不工作..........
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.Untitled1();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
答
在你的样品,您绘制的内容到画布背景,然后更新使用相同的上下文的EaselJS阶段。 EaselJS默认会在绘制之前清除上下文。您可以关闭自动清除,但这会产生其他问题。
更好的解决方案是使用EaselJS绘制其他内容。
// Create your red square
var shape = new createjs.Shape();
shape.graphics.beginFill("#FF0000").drawRect(0,0,150,75);
// Create the stage and add the exportRoot
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
// Add your shape to the stage
stage.addChild(shape);
// Then the rest...
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
如果需要使用自己的上下文操作,就可以吸引他们到一个单独的画布上,然后使用画布作为源的位图
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
var bitmap = new createjs.Bitmap(canvas);
stage = new createjs.Stage("otherCanvasId");
stage.addChild(exportRoot);
stage.addChild(bitmap);
// Other stuff here
希望是有道理的!