createjs html5画布集成不起作用

Question

我试图将w3school html5画布与flash导出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

在你的样品，您绘制的内容到画布背景，然后更新使用相同的上下文的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 

希望是有道理的！