这篇文章主要介绍了HTML5 Canvas如何实现事件感应,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
站在用户的角度思考问题,与客户深入沟通,找到丘北网站设计与丘北网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟主机、企业邮箱。业务覆盖丘北地区。
在实际的开发过程中,对于Canvas来说,某一区域的鼠标事件感应是一件非常重要而常见的需求,本节会提供一个感应事件的示例代码。
在下面代码中,我们对整个Canvas的click和mouseover事件进行了监听,并在此事件执行时,产生响应触发效果。
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)构成的矩形区域
}
}
感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5 Canvas如何实现事件感应”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!