打开一首歌然后用鼠标点一下这个鼓，接着就尽情的按zxcv吧！

代码

TaiKoooooo
<script src="CanvasObjLibrary.js"></script>
<script src="pics.js" type="text/javascript">
</script>
<script>
//来自网络的动画帧解决方案
(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];
	for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
		window.cancelRequestAnimationFrame = window[vendors[x] + 'CancelRequestAnimationFrame'];
	}
	if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
		var currTime = new Date().getTime();
		var timeToCall = Math.max(0, 16 - (currTime - lastTime));
		var id = window.setTimeout(function() {
		callback(currTime + timeToCall);
		},
		timeToCall);
		lastTime = currTime + timeToCall;
		return id;
	};
	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
		clearTimeout(id);
	};
} ());
</script>
<canvas id="canvas" style="height: 360px; width: 450px;">
</canvas>
<script>
//建立四个声音 
var a_pongleft=new Audio(), a_pongright=new Audio(), a_daleft=new Audio(), a_daright=new Audio(); 
//设置音源
a_pongright.src=a_pongleft.src="pong.mp3"; a_daleft.src=a_daright.src="da.mp3";
var gui=newC_GUI();
gui.autoClear=true;
var canvas=document.querySelector("#canvas"); gui.setCanvas(canvas);
//设置canvas 
//定义太鼓 
var taiko=gui.Graph.New(), daleft=gui.Graph.New(), pongleft=gui.Graph.New(), pongright=gui.Graph.New(), daright=gui.Graph.New(); 
//由于太鼓绘制的步骤较复杂所以定义成图片 
taiko.drawtype="image"; 
taiko.drawpic(450,360,drawfunctions.taiko); 
//定义各部分的绘制函数(drawfunctions是pics,js里的一个对象) 
daleft.drawfunction=drawfunctions.daleft; 
pongleft.drawfunction=drawfunctions.pongleft; 
pongright.drawfunction=drawfunctions.pongright; 
daright.drawfunction=drawfunctions.daright; 
//定义一下部件的宽高 
daleft.width=pongleft.width=pongright.width=daright.width=450; 
daleft.height=pongleft.height=pongright.height=daright.height=360; 
//把4个部件暂时隐藏起来 
daleft.display=false; 
pongleft.display=false; 
pongright.display=false; 
daright.display=false; 
//搞好多边外交关系 
gui.document.addChild(taiko); 
taiko.addChild(daleft); 
taiko.addChild(pongleft); 
taiko.addChild(pongright); 
taiko.addChild(daright); 
function draw(){//循环绘制 
	gui.draw(); 
	requestAnimationFrame(draw); 
}requestAnimationFrame(draw); 
//控制按下对应键以后对应部分显示一会儿然后消失 
function timer(G){ 
	clearTimeout(G.timer); 
	G.display=true; 
	G.timer=setTimeout(function(){ 
		G.display=false; 
	},90); 
}
var doc=gui.document; 
doc.addEvent("onkeydown",function(e){//添加按键事件 
	switch(e.keyCode){ 
		case 90:
			a_daleft.currentTime=0;a_daleft.play();//重新播放音效 
			timer(daleft); 
			break; 
		case 88:
			a_pongleft.currentTime=0;
			a_pongleft.play(); 
			timer(pongleft); 
			break;
		case 67:
			a_pongright.currentTime=0;
			a_pongright.play(); 
			timer(pongright); 
			break;
		case 86:
			a_daright.currentTime=0;
			a_daright.play(); 
			timer(daright); 
			break; 
	} 
});
</script>