HTML5 Canvas如何实现事件感应

这篇文章主要介绍了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如何实现事件感应”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!