这篇文章主要介绍了HTML5 Canvas如何实现事件感应，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
在实际的开发过程中，对于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>
感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5 Canvas如何实现事件感应”这篇文章对大家有帮助，同时也希望大家多多支持云搜网，关注云搜网行业资讯频道，更多相关知识等着你来学习!
