因为没有说明有没使用 jQuery 等语言库，所以使用原生JS来演示。
代码如下，直接复制那段JS去用就可以了。
over是进入区域的事件，out是离开区域的事件。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas2" width="300" height="200" style="border:1px solid #000000">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var obj=document.querySelectorAll('canvas')
for(var i=0i<obj.lengthi++){
obj[i].onmouseover=function(){
this.style.backgroundColor='#ccc'
}
obj[i].onmouseout=function(){
this.style.backgroundColor='#fff'
}
}
</script>
</body>
</html>
网上大把教程http://www.w3school.com.cn/html5/html5_canvas.asp
http://blog.csdn.net/clh604/article/details/8536059
如果单单说页面结构，不介绍新的特性、功能的话，人见解，最大的变化恐怕是语意化了，html5增加了了很多语意化标签，比如header、footer、nav等等。这些标签有利于让浏览器或者蜘蛛（搜索引擎）更好理解你的页面想表达的内容。比传统html4使用表格或者div布局更加有利于SEO或者无障碍阅读。其次，页面头部的文档类型声明也比html4更加简洁，文档类型的作用，主要是告诉浏览器此文档是什么种类，该如何解析。html4有很多种头部文档声明，比较乱，新手可能很难一下子理解（说实话我也不太理解），而html5则精简到了一种：<!DOCTYPE HTML>这样就使代码出错，和兼容问题得到了妥善解决。
个人觉得主要是这些改动吧，望采纳。
