HTML5Canvas如何实现事件感应

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