HTML5 Canvas如何实现事件感应

这篇文章主要介绍了HTML5 Canvas如何实现事件感应，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
在实际的开发过程中，对于Canvas来说，某一区域的鼠标事件感应是一件非常重要而常见的需求，本节会提供一个感应事件的示例代码。
在下面代码中，我们对整个Canvas的click和mouseover事件进行了监听，并在此事件执行时，产生响应触发效果。

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

onmouseout=”check(event)”>

onclick=”check(event);” onmouseover=”check(event)”
onmouseout=”check(event)”>

v免费云主机、域名ar 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=100 &&
event.clientY

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)构成的矩形区域
}
}
感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5 Canvas如何实现事件感应”这篇文章对大家有帮助，同时也希望大家多多支持云技术，关注云技术行业资讯频道，更多相关知识等着你来学习!

相关推荐: %是不是css3的单位

今天小编给大家分享一下%是不是css3的单位的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。 “%”是css3中的单位，“%”指的是百分比，是一个…