我的代码工作正常，直到我尝试将这些bezier形状添加到容器中然后我的形状消失了。将它们直接添加到舞台上可以正常工作，但是将它们添加到容器中然后再添加到舞台上。
var stage;
var graphics;
var crossShape;
var innerRingsShape;
var ringShape;
var centreShape;
var shapeContainer;
var queue;
var logoSize = 300;
var logoPosX = 600;
var logoPosY = 150;
var logoRadius = logoSize / 2;
var rotateDegrees = [90,180,270,360];
function init() {
stage = new createjs.Stage("myCanvas");
queue = new createjs.LoadQueue(false);
queue.addEventListener("complete", handleComplete);
}
function buildShapes(){
var graphicsCross = new createjs.Graphics();
var graphicsInnerRings = new createjs.Graphics();
var graphicsCentre = new createjs.Graphics();
var graphicsRing = new createjs.Graphics();
shapeContainer = new createjs.Container();
shapeContainer.x = logoPosX + 100;
shapeContainer.y = logoPosY + 100;
shapeContainer.regX = 0;
shapeContainer.regY = 0;
graphicsCross.setStrokeStyle(1); graphicsCross.beginStroke(createjs.Graphics.getRGB(0,0,0)); graphicsCross.beginFill(createjs.Graphics.getRGB(0,0,0));
graphicsInnerRings.setStrokeStyle(1); graphicsInnerRings.beginStroke(createjs.Graphics.getRGB(0,0,0)); graphicsInnerRings.beginFill(createjs.Graphics.getRGB(255,255,255));
graphicsCentre.setStrokeStyle(1); graphicsCentre.beginStroke(createjs.Graphics.getRGB(0,0,0)); graphicsCentre.beginFill(createjs.Graphics.getRGB(255,255,255));
graphicsRing.setStrokeStyle(1); graphicsRing.beginStroke(createjs.Graphics.getRGB(0,0,0)); graphicsRing.beginFill(createjs.Graphics.getRGB(0,0,0));
graphicsRing.drawCircle(logoRadius,logoRadius, logoRadius - 4);
graphicsRing.beginFill(createjs.Graphics.getRGB(255,255,255));
graphicsRing.drawCircle(logoRadius,logoRadius, logoRadius - 14);
ringShape = new createjs.Shape(graphicsRing);
ringShape.x = logoPosX;
ringShape.y = logoPosY;
ringShape.regX = logoRadius;
ringShape.regY = logoRadius;
graphicsCross.moveTo(59,70);
graphicsCross.bezierCurveTo(57,74,56,78,55,81);
graphicsCross.bezierCurveTo(72,92,89,102,107,112);
graphicsCross.lineTo(107,111);
graphicsCross.bezierCurveTo(106,109,105,107,104,105);
graphicsCross.bezierCurveTo(96,90,88,75,81,60);
graphicsCross.bezierCurveTo(80,59,79,58,77,59);
graphicsCross.bezierCurveTo(74,60,71,60,67,61);
graphicsCross.bezierCurveTo(108,19,185,15,231,61);
graphicsCross.bezierCurveTo(227,60,224,60,220,59);
graphicsCross.bezierCurveTo(219,58,218,58,218,60);
graphicsCross.bezierCurveTo(209,77,200,94,191,110);
graphicsCross.bezierCurveTo(191,111,191,111,191,112);
graphicsCross.bezierCurveTo(209,102,226,92,243,81);
graphicsCross.bezierCurveTo(242,78,241,74,240,70);
graphicsCross.bezierCurveTo(278,111,280,186,240,229);
graphicsCross.bezierCurveTo(241,226,241,223,242,221);
graphicsCross.bezierCurveTo(243,219,242,218,241,217);
graphicsCross.bezierCurveTo(226,209,212,200,198,192);
graphicsCross.bezierCurveTo(196,191,194,190,191,188);
graphicsCross.bezierCurveTo(192,190,193,192,194,194);
graphicsCross.bezierCurveTo(202,209,210,224,217,239);
graphicsCross.bezierCurveTo(218,241,219,241,221,241);
graphicsCross.bezierCurveTo(224,240,227,239,231,238);
graphicsCross.bezierCurveTo(192,279,115,286,67,238);
graphicsCross.bezierCurveTo(71,239,74,240,78,241);
graphicsCross.bezierCurveTo(79,241,80,241,80,240);
graphicsCross.bezierCurveTo(89,223,98,206,107,189);
graphicsCross.bezierCurveTo(107,189,107,189,107,188);
graphicsCross.bezierCurveTo(89,198,72,208,55,218);
graphicsCross.bezierCurveTo(56,222,57,226,59,230);
graphicsCross.bezierCurveTo(20,190,17,114,59,70);
crossShape = new createjs.Shape(graphicsCross);
crossShape.x = logoPosX;
crossShape.y = logoPosY;
crossShape.regX = logoRadius;
crossShape.regY = logoRadius;
graphicsInnerRings.moveTo(183,206);
graphicsInnerRings.bezierCurveTo(185,211,188,216,190,221);
graphicsInnerRings.bezierCurveTo(168,235,132,236,108,221);
graphicsInnerRings.bezierCurveTo(110,216,113,211,115,206);
graphicsInnerRings.bezierCurveTo(138,218,160,218,183,206);
graphicsInnerRings.moveTo(183,92);
graphicsInnerRings.bezierCurveTo(160,80,138,80,115,92);
graphicsInnerRings.bezierCurveTo(113,87,110,82,108,77);
graphicsInnerRings.bezierCurveTo(129,63,166,61,190,77);
graphicsInnerRings.bezierCurveTo(188,82,185,87,183,92);
graphicsInnerRings.moveTo(75,111);
graphicsInnerRings.bezierCurveTo(80,114,85,117,90,120);
graphicsInnerRings.bezierCurveTo(81,139,81,158,90,178);
graphicsInnerRings.bezierCurveTo(85,181,80,184,76,187);
graphicsInnerRings.bezierCurveTo(64,173,64,128,75,111);
graphicsInnerRings.moveTo(223,111);
graphicsInnerRings.bezierCurveTo(235,132,235,166,223,187);
graphicsInnerRings.bezierCurveTo(218,184,214,181,209,179);
graphicsInnerRings.bezierCurveTo(209,178,209,177,209,176);
graphicsInnerRings.bezierCurveTo(216,159,217,142,210,125);
graphicsInnerRings.bezierCurveTo(210,124,210,123,209,122);
graphicsInnerRings.bezierCurveTo(209,122,209,121,208,120);
graphicsInnerRings.bezierCurveTo(213,117,218,114,223,111);
innerRingsShape = new createjs.Shape(graphicsInnerRings);
innerRingsShape.x = logoPosX;
innerRingsShape.y = logoPosY;
innerRingsShape.regX = logoRadius;
innerRingsShape.regY = logoRadius;
graphicsCentre.drawCircle(logoRadius,logoRadius,35);
centreShape = new createjs.Shape(graphicsCentre);
centreShape.x = logoPosX;
centreShape.y = logoPosY;
centreShape.regX = logoRadius;
centreShape.regY = logoRadius;
shapeContainer.addChild(ringShape, crossShape, innerRingsShape, centreShape);
stage.addChild(shapeContainer);
stage.update();
}
function handleComplete(event) {
var ball = new createjs.Shape();
buildShapes();
ball.graphics.beginFill("#000000").drawCircle(0, 0, 50);
ball.x = 150;
ball.y = 400;
createjs.Ticker.addEventListener("tick", tick);
stage.addChild(ball);
}
function tick(event) {
stage.update();
}