javascript - createjs html5 canvas 集成不起作用

Question

我试图将 w3school html5 canvas 与 flash export createjs 集成 我刚刚在 createjs 输出中添加了这段代码。

 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>

Answer 1

在您的示例中，您将内容绘制到 Canvas 上下文，然后更新使用相同上下文的 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);

如果您需要使用自己的上下文操作，可以将它们绘制到单独的 Canvas 上，然后使用该 Canvas 作为位图的源

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

希望这是有道理的!