在实际的开发过程中，对于Canvas来说，某一区域的鼠标事件感应是一件非常重要而常见的需求，本节会提供一个感应事件的示例代码。

 

在下面代码中，我们对整个Canvas的click和mouseover事件进行了监听，并在此事件执行时，产生响应触发效果。

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;"

onclick="check(event);" onmouseover="check(event)"

onmouseout="check(event)"></canvas>

<script type="text/javascript">

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

ctx.fillStyle="blue";

ctx.fillRect(100,100,100,100); //设定感应区为(100,100)和(100,100)构成的矩形区域

function check(event){

console.log(event.clientX+"-"+event.clientY);

if((event.clientX>=100 && event.clientX<=200 && event.clientY>=100 &&

event.clientY<=200)){ //判定是否在感应区中

ctx.clearRect(0,0,500,500);

ctx.fillStyle="rgba(100,100,100,0.5)";

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;

ctx.shadowBlur = 5;

ctx.shadowColor = "rgba(0, 0, 0, 0.9)"; //阴影的颜色，透明度为0.9

ctx.fillRect(100,100,100,100);

}

else

{

ctx.fillStyle="blue";

ctx.fillRect(100,100,100,100); //设定感应区为(100,100)和(100,100)构成的矩形区域

}

}

</script>