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 

希望是有道理的！