html5画布

可以这样绑定敲击事件：

Canvas

序言：
在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求，都会用canvas技术，比dom操作性能更高
特点
① H5新增的图形标签，通过提供的JavaScript函数绘制各种图表或利用算法实际非常华丽的动效
② 在以前是用Flash技术实现，但不能和JS交互,
③ 适合动态图形绘制
缺点
是位图，缩放会模糊
API
环境 目前只有2d绘制
getContext(‘2d’) 创建2D绘制环境
绘制矩形

rect(x,y,w,h)		绘制矩形
fillRect(x,y,w,h)    绘制填充实心矩形
strokeRect(x,y,w,h)  绘制空心矩形
clearRect(x,y,w,h)   清除矩形选区

绘制方式
stroke( )			以边框线的方式绘制图形，默认填充黑色
fill( )				以填充的方式绘制图形，默认填充黑色

 

绘制样式属性

fillStyle            填充颜色
strokeStyle            触笔颜色
lineWidth            触笔粗细(线宽)
 绘制线条
moveTo(x,y)             从x,y开始绘制
lineTo(x,y)