html5-canvas - 为包裹在 kineticJS 中的画布设置边框

Question

我只是从教程中复制粘贴代码：

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

问题是 canvas{} 的样式设置没有考虑在内。

我清楚地知道画布在哪里并且它应该可以工作，因为：A）我已经完成了，但我无法获得代码的工作副本 B）Firebug 告诉我有一个画布......所以为什么它不工作？

我的最终目标是在视觉上区分舞台（通过边框或适当的背景颜色）

谢谢！

Answer 1

Well, alternatively you can draw a border with background color inside KineticJS by using a Kinetic.Rect to distinguish the stage visually:

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

jsfiddle

The only tiny issue with this is that you'll get 1 Extra Kinetic Node inside your canvas. If you wanna keep the solution outside the canvas, than style your #container to be the same width and height as your stage/canvas, and then wrap the #container inside another <div> and give that <div> the original styling you had on #container. Like this:

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