Canvas--交互以及獲取鼠標位置的方法

一、isPointInPath(x,y) 方法：

　　若是指定的點位於當前路徑中，isPointInPath() 方法返回 true，不然返回 false。

1 context.rect(0,0,100,100)
2 context.font="30px Verdana"
3 context.fillText(context.isPointInPath(50,50),10,50);
4 context.fillText(context.isPointInPath(50,150),10,90);

　　結合 clearRect 方法實現交互效果：

1 context.rect(0,0,100,100)
2 
3 canvas.addEventListener('click',function(e){
4     if(context.isPointInPath(e.offsetX,e.offsetY)){
5         context.fill()
6     }else{
7         context.clearRect(0,0,canvas.width,canvas.height)
8     }
9 })

 

二、獲取鼠標相對於canvas的位置的方法

　　1）e.offsetX 、e.offsetY

　　2）e.layerX 、 e.layerY

　　3）e.clientX - canvas.getBoundingClientRect().left 、e.clientY - canvas.getBoundingClientRect().top

　　HTML：

1 <canvas id="canvas">Your browser does not support Canvas, please upgrade your browser</canvas>

　　CSS：

1 #canvas{
2     display: block;
3     margin: 0 auto;
4     position: relative;
5     border:1px solid currentColor;
6 }

　　JS：

1 var canvas = document.getElementById('canvas')
2 var context = canvas.getContext('2d')
3 
4 canvas.addEventListener('click', function(e) {
5     console.log('offsetX:' + e.offsetX + ',offsetY:' + e.offsetY)
6     console.log('layerX:' + e.layerX + ',layerY:' + e.layerY)
7     console.log('X:' + (e.clientX - canvas.getBoundingClientRect().left) + ',Y:' + (e.clientY - canvas.getBoundingClientRect().top))
8 })

這3種方法在不一樣瀏覽器下的值：

　　IE9+     ：

　　Firefox  ：

　　Chrome：

　　Opera   ：

　　UC        ：

　　Safari    ：

　　能夠看到 ，除了Safari瀏覽器，offset 方法獲取到的值比其餘兩種方法要少1，這是由於canvas元素設置了1px的border。

　　也就是說 offset 方法獲取到的鼠標位置是參考自身元素內容區域的左上角（不包括border）。

　　另外，須要注意的是，e.layerX/Y須要給自身元素設置position（屬性值不能是static | inherit），不然瀏覽器會參考document文檔區域的左上角。