第一章 基础知识
第八节 在Canvas中使用HTML元素
#glasspane p {
margin: 10px;
color: rgba(65, 65, 220, 1.0);
font-size: 12pt;
font-family: Palatino, Arial,Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id='glasspane'>
<h2 class='title'>Bouncing Balls</h2>
<p>One hundred balls bouncing</p>
<a id='startButton'>Start</a>
</div>
<canvas id='canvas' width='750' height='500'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
程序清单1-8中的HTML代码，通过CSS来确定玻璃窗格的绝对位置，让其显示在canvas之上，像是这样：
#canvas {
margin-left: 10px;
margin-top: 10px;
background: #ffffff;
border: thin solid #aaaaaa;
}
#glasspane {
position: absolute;
left: 50px;
top: 50px;
...
}
前面一份CSS样式表使用了相对定位方式来指定canvas元素的位置，这也是CSS之中position属性的默认值。然而，后面一份样式表则使用绝对定位方式来指定玻璃窗格的位置。CSS规范书中规定：采用绝对定位方式的元素将被绘制在采用相对定位方式的元素之上。这也就是图1-16中为何玻璃窗格会显示在canvas之上的原因。
如果将canvas的定位方式也改成绝对定位的话，那么canvas将会出现在玻璃窗格上方，这样的话，就看不见玻璃窗格了，因为canvas的背景不是透明的。在那种情况下，玻璃窗格位于canvas的下方，因为canvas元素出现在代表玻璃窗格的DIV元素后方。如果改变这两个元素的顺序，那么玻璃窗格又会重新出现在canvas之上了。
所以说，将玻璃窗格放置在canvas之上，可以采用两种办法：要么对canvas使用相对定位，对玻璃窗格使用绝对定位；要么对两个元素都采用相对或绝对定位，并且把代表玻璃窗格的DIV元素放置在canvas元素之后。
还有第三种办法，那就是对这两个元素都采用相对或绝对定位方式，然后调整其CSS之中的z-index属性。浏览器会将z-index值较大的元素绘制在z-index值较小元素的上面。
除了放置好需要显示的HTML控件，还需要在JavaScript代码中获取指向这些控件的引用，以便访问并修改它们的属性值。
HTML5 Canvas核心技术—图形、动画与游戏开发
- 作者：
- David.Geary
- 类别：
- 基础信息化
- 出版社：
- 华章出版社
- 出版时间：
- 2013年5月
- 定价：
- ￥99.00
- 京东价：￥79.70
实际售价以e-works战略合作伙伴当日售价为准