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 :　                用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

以上。