canvas 修改光標形狀 滑過事件 點擊事件

1.需求：在canvas做了點擊事件響應的地方，將光標形狀改成小手的模樣，旨在提示用戶這裏可以點擊，其餘地方爲默認箭頭模樣，實現div超鏈接的做法。

2.百度了好一陣子，都是講div的光標樣式變換，並未涉及canvas。雖然說實現起來並不難，還是寫下來，供大家參考。

a.做光標滑過事件響應

var canvas = document.getElementById('room');
canvas.onmousemove = function(e){
	p = getEventPosition(e);
	hoverTitle(p.x, p.y);
}

b. 光標變換

function hoverTitle(x,y){
	var ifp = 0;
	for(var i = 0; i < clickposition.length; i++){
		var p = clickposition[i];
		if(p.x1 < x && p.x2 > x && p.y1 < y && p.y2 > y){
			ifp = 1;
			
		}
	}
	if(ifp == 1){
		$("body").css('cursor','pointer');
	}else{
		$("body").css('cursor','default');
	}
}

c.獲取光標作用位置，已兼容各瀏覽器，注意需要給Canvas元素的position設爲absolute。

function getEventPosition(ev){
	  var x, y;
	  if (ev.layerX || ev.layerX == 0) {
	    x = ev.layerX;
	    y = ev.layerY;
	  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
	    x = ev.offsetX;
	    y = ev.offsetY;
	  }
	  return {x: x, y: y};
}

d.另附上點擊事件代碼

canvas.addEventListener('click', function(e){
	p = getEventPosition(e);
	clickTitle(p.x, p.y);
}, false);

function clickTitle(x,y){
	for(var i = 0; i < clickposition.length; i++){
		var p = clickposition[i];
		if(p.x1 < x && p.x2 > x && p.y1 < y && p.y2 > y){
			parent.goDetail("${siteId}",p.id);
		}
	}
}

e.附上光標幾種常用的變換形式

auto:                     自動值。

crosshair :　       簡單的十字光標。

default :　           客戶端平臺的默認光標。

pointer:                豎起一隻手指的手形光標。

move :　             十字箭頭光標。用於標示對象可被移動。

help :　               帶有問號標記的箭頭。用於標示有幫助信息存在。

text :　                 用於標示可編輯的水平文本的光標。通常是大寫字母 I 的形狀。

wait :　                用於標示程序忙用戶需要等待的光標。通常是沙漏或手錶的形狀。

以上。