精灵表坐标查看器-canvas学习第三天

先来看效果图
JavaScript的代码

var canvas = document.getElementById('canvas'),
	readout = document.getElementById('readout'),
	context = canvas.getContext('2d'),
	spritesheet = new Image();
 
 
//Functions
//将鼠标坐标转换成canvas坐标
function windowToCanvas(canvas,x,y) {
	var bbox = canvas.getBoundingClientRect();
	return {
		x:x - bbox.left * (canvas.width / bbox.width),
		y:y - bbox.top * (canvas.height / bbox.height)
	};
}
 
function drawBackground(){
	var VERTICAL_LINE_SPACING = 12;
		i = context.canvas.height;
	//清屏
	context.clearRect(0,0,canvas.width,canvas.height);
	context.strokeStyle = 'lightgray';
	context.lineWidth = 0.5;
 
	while(i > VERTICAL_LINE_SPACING*4){
		context.beginPath();