Установка границы для холста, завернутые в kineticJS

Question

Я просто copypasted код из учебника:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/

Проблема заключается в том, что установка стиля для холста {} не принимается во внимание.

Я четко знаю, где холст и что он должен работать, потому что: А) Я уже сделал это, но я не могу получить рабочую копию кода B) Firebug говорит мне, что есть холст ... Так почему это не работает?

Моя конечная цель, чтобы отличить стадию визуально (бордюром или правильный цвет фона)

Спасибо!

Answer 1

Ну, в качестве альтернативы вы можете нарисовать границу с цветом фона внутри KineticJS с помощью Kinetic.Rect различать стадии визуально:

var border = new Kinetic.Rect({ 
    width: stage.getWidth(), 
    height: stage.getHeight(), 
    stroke: 'black', 
    strokeWidth: 4, //Border Size in Pixels 
    fill: '#00FF00' //Background Color 
}); 

jsfiddle

только крошечная проблема с этим является то, что вам 'Получите 1 дополнительный кинетический узел внутри вашего холста. Если вы хотите сохранить решение за пределами холста, чем стиль вашего #container, чтобы быть той же ширины и высоты, что и ваша сцена/холст, а затем оберните #container внутри другого <div> и дайте этому <div> оригинальный стиль, который у вас был на #container. Как это:

HTML:

<div id="containerWrapper"> 
    <div id="container"></div> 
</div> 

CSS:

#containerWrapper { 
    /*#container's old styles here*/ 
} 

#container { 
    width: widthOfStage; 
    height: heightOfStage; 
    border: 4px solid #000; 
    background:#00FF00; 
} 

2nd example jsfiddle