Question

我有一个用html5，CSS和Java Script制作的钢琴。钢琴有24个和弦，想要将它们和它们各自的黑色和弦从[C-D']减少到9个白色和弦，我不擅长java脚本并尽力去除那些键并达到一定水平成功地排除了那些所需的和弦，但是它们仍然存在于画布中并且不响应点击事件但除了被排除之外我希望它们从画布中消失，即从[C到D']的和弦中消失。我正在附上下面的html和js源代码。

以下是HTML代码：

的index.html

var Chords = [
	 [ "Single Note", [1] ]];



var Piano = (function()
{
	var $chordSelector = $("#chordSelector");
	var $chordsInplay = $("#chordsInplay");
	var $canvas = $("#c");	
	var context = $canvas[0].getContext('2d');

	var gaps = [3,7,10,14]
		, jumpTable = [2,3,5,6,7,9,10,12,13,14]
		, eb = [2,4,7,9,11,14,16,19,21,23];
	var xOffset = 1, yOffset = 1;

	var chords = "C C# D D# E F F# G G# A A# B C' C#' D'";

	this.chordsArray = chords.split(" ");

	//Constructorish

	context.strokeStyle = "black";
	context.fillStyle = "white";
	
	$.each(Chords, function (i,v)
	{
		$chordSelector.append("<option value='"  + v[0] + "'>"  + v[0] + "</option>");
	});
	$.each(this.chordsArray, function (i,v)
	{
		$chordsInplay.append("<audio src=\"resources/"  +  escape(v) + ".mp3\" preload='auto'></audio>");
	});
	//Public methods
	this.drawPiano = function (selectedKeys) 
	{
		var selectedKeys = selectedKeys || [];
		var key = 1, skipped = 0;

		keyLooper(selectedKeys, drawIvoryKey, null);
		keyLooper(selectedKeys, null, drawEbonyKey);
	};


	//Private methods

	var keyLooper = function(selectedKeys, beforeSkipHandler, afterSkipHandle)
	{
		var key = 0, skipped = 0;
		while (key < 28) 
		{
			if (beforeSkipHandler != null)  //assume function
				beforeSkipHandler.call(this, selectedKeys, key, skipped);
			if (gaps.indexOf((key % 14) + 1) < 0)
			{
				skipped++;
				if (afterSkipHandle!= null)  //assume function
					afterSkipHandle.call(this, selectedKeys, key, skipped);
			}
			key++;
		}
	};
    
	var getDefaultColorForKey = function (key)
	{
		return key >= 14 ? "grey" : "black";
	}
	
	var drawEbonyKey = function(selectedKeys, key, skipped)
	{
		var keyX = (key * 30) + xOffset;
		var letterx = (key * 30) + 21; 
		var drawingKey = (key + 1) + skipped;

		
		context.fillStyle = (selectedKeys.indexOf(drawingKey) > -1) ? "#CEF" : getDefaultColorForKey(key);
		context.fillRect(keyX + 20 ,yOffset,20, 75);

		context.strokeRect(keyX + 20 ,yOffset,20,75);
		context.fillStyle = (selectedKeys.indexOf(drawingKey) > -1) ? "black" : "white";
		context.fillText(chordsArray[key + skipped], keyX + 22, yOffset + 40);
		context.fillStyle = getDefaultColorForKey(key)
	};

	var drawIvoryKey = function(selectedKeys, key, skipped)
	{
		var keyX = (key * 30) + xOffset;
		var letterx = (key * 30) + 11 + xOffset;
		var drawingKey = (key + 1) + skipped;

		context.fillStyle = (selectedKeys.indexOf(drawingKey) > -1) ? "#CEF" : "white";
		context.fillRect(keyX ,yOffset,30,150);
    
		context.strokeRect(keyX ,yOffset,30,150);
		context.fillStyle = "black";
		context.fillText(this.chordsArray[(key) + skipped], letterx  , yOffset + 110);
		context.fillStyle = "white";
	}


	var isInRect = function (x,y,rx,ry,rw,rh)
	{
		return (x >= rx && x <= rx+rw) && (y >= ry && y <= ry+rh);
	};
	var isInPiano = function(x,y)
	{
		return isInRect(x,y,xOffset,yOffset,420,150);
	};

	var findIvoryKey = function (x, y)
	{
	   var key = Math.ceil((x - xOffset) / 30)
		if (jumpTable.indexOf(key) > -1)
		{
			key = key + (jumpTable.indexOf(key) + 1);
		}
		else {
			for (var i = 0;key > 1 && i<jumpTable.length;i++) {
				if (jumpTable[i] > key)
				{
					key = key + i;
					break;
				}
			}
		}
		return key;
	}
	var actuallyOnEbonyKey = function(key, x, y)
	{
		x = x - xOffset, y = y - yOffset;
		var m = (x % 30);
		var k = key;

		if ((y >= 75) || (m > 10 && m < 20))
			return key;

		((m >= 10 || m == 0) ? k++ : k--);

		return eb.indexOf(k) < 0 ? key : k;
	}
	
	var getChordKeysForRootKey = function(key)
	{
		var selectedChord = $("#chordSelector option:selected").val();
		var keys = [key];
		for (var i = 0; i < Chords.length; i++)
		{
			if (Chords[i][0] == selectedChord)
			{
				keys = [];
				for (var c = 0; c < Chords[i][1].length; c++)
				{
					keys.push(Chords[i][1][c] + (key - 1));
				}
				break;
			}
		}
			
		return keys;
	}
	
	
	var mouseMoveHandler = function(e)
	{      
		var x = Math.floor((e.pageX-$("#c").offset().left));
		var y = Math.floor((e.pageY-$("#c").offset().top));
		if (!isInPiano(x,y))
			return;

		var key = findIvoryKey(x, y);
		key = actuallyOnEbonyKey(key, x, y); 
		
		var keys = getChordKeysForRootKey(key);
		
		this.drawPiano(keys);

	};
	
	this.playNotes = function (selectedKeys)
	{
		selectedKeys = selectedKeys || [];
		if (selectedKeys.length == 0)
			return;
		
		for (var i = 0; i < selectedKeys.length; i++)
		{
				var a = $chordsInplay.append("<audio src='resources/"+ escape(this.chordsArray[selectedKeys[i] - 1]) +".mp3' autoplay='true'></audio>");
				a.find("audio:last").bind("ended", function (e) 
				{ 
					$(this).remove(); 
				});
		}	
	}
	
	
	var mouseClickHandler = function(e)
	{      
		var x = Math.floor((e.pageX-$("#c").offset().left));
		var y = Math.floor((e.pageY-$("#c").offset().top));
		if (!isInPiano(x,y))
			return;

		var key = findIvoryKey(x, y);
		key = actuallyOnEbonyKey(key, x, y); 
		var keys = getChordKeysForRootKey(key);
		this.playNotes(keys);

	};

	//REGISTER EVENTS

	$("#c").mousemove($.proxy(mouseMoveHandler, this));
	$("#c").click($.proxy(mouseClickHandler, this));


	//KICK OFF 
	this.drawPiano();
})();

#header, 
#midsection,
#content,
canvas
{
	width:844px;
	margin:auto;
}
*
{
		font-family: 'Ubuntu', serif;
}
h1
{
	font-size:64px;
	color:black;
	display:inline-block;
	margin-top:1px;
	margin-bottom:1px;
}
h1 span
{
	display:inline-block;
	padding-top:-10px;
}
#header 
{
	margin-top:40px;
	margin-bottom:30px;
}
#header img {
	margin-top:10px;
	float:left;
}
canvas
{
	display:inline;
	background: transparent;   
}

{


}

#content
{

}
select 
{
	float:right;
	margin:auto;
	display:block;
	margin-top:30px;
}

body {
	background: url('resources/background-site.jpg') top center repeat-x;
	margin:0px;
	padding:0px;
}
canvas {
	 
}

<!DOCTYPE HTML>
<html>
	<head>
		<title>HTML5 Piano</title>
		<link rel="stylesheet" type="text/css" media="screen" href="piano.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<div id="header">
			<select id="chordSelector"></select>
		</div>
		<div id="midsection">
			
			<canvas id="c" width="844" height="180"></canvas>
		</div>
		<div id="content">
			<div id="chordsInplay">
			
			</div>
		</div>
		<script type="text/javascript" src="chords.js"></script>
		<script type="text/javascript" src="piano.js"></script>
	</body> 
</head>
</html>

Answer 1

您的keyLooper函数已硬编码以生成28个键：

while (key < 28) ...

您需要更改它以减少其绘制的键数。

使用HTML5，CSS和JavaScript制作钢琴时难以移除额外的钢琴和弦

1 个答案: