第一章 基础知识
第八节 在Canvas中使用HTML元素
尽管我们可以说Canvas是HTML5之中最棒的功能，不过在实现网络应用程序时，很少会单独使用它。在绝大多数情况下，你都会将一个或更多的canvas元素与其他HTML控件结合起来使用，以便让用户可以通过输入数值或其他方式来控制应用程序。
要将其他HTML控件与canvas结合起来使用，首先想到的办法可能是将控件嵌入到canvas元素之中。不过这么做不行，因为任何放入canvas元素主体部分的东西，只有在浏览器不支持canvas元素时，才会被显示出来。
浏览器要么显示canvas元素，要么显示放在元素之中的HTML控件，它不会将两者同时显示出来。所以，必须将控件放在canvas元素之外。
为了让HTML控件看上去好像是出现在canvas范围内，可以使用CSS将这些控件放置在canvas之上。图1-16中的应用程序演示了这个效果。
图1-16 显示在canvas之上的HTML元素
图1-16之中的应用程序显示了100个运动的小球，并且提供了一个用于启动或停止动画效果的链接。这个存在于DIV元素之中的链接是半透明的，并且浮动在canvas之上。我们将这种DIV叫做“玻璃窗格”（glass pane），因为它看起来像是一个浮动在canvas元素之上的玻璃板。
程序清单1-8列出了图1-16之中这个应用程序的HTML代码。
程序清单1-8 用于在canvas之中显示HTML控件的HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Balls</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin-left: 10px;
margin-top: 10px;
background: #ffffff;
border: thin solid #aaaaaa;
}
#glasspane {
position: absolute;
left: 50px;
top: 50px;
padding: 0px 20px 10px 10px;
background: rgba(0, 0, 0, 0.3);
border: thin solid rgba(0, 0, 0, 0.6);
color: #eeeeee;
font-family: Droid Sans, Arial,Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
-moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
}
#glasspane h2 {
font-weight: normal;
}
#glasspane .title {
font-size: 2em;
color: rgba(255, 255, 0, 0.8);
}
#glasspane a:hover {
color: yellow;
}
#glasspane a {
text-decoration: none;
color: #cccccc;
font-size: 3.5em;
}
HTML5 Canvas核心技术—图形、动画与游戏开发
- 作者：
- David.Geary
- 类别：
- 基础信息化
- 出版社：
- 华章出版社
- 出版时间：
- 2013年5月
- 定价：
- ￥99.00
- 京东价：￥79.70
实际售价以e-works战略合作伙伴当日售价为准