大佬教程收集整理的这篇文章主要介绍了javascript – HTML5命中检测可能吗?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经使用了本网站其他地方提供的Canvas代码来创建一个屏幕,其中我有几个重叠的透明png,非透明部分是不规则形状.我可以在光标下获得颜色,这很棒.但我的形状都是相同的颜色,我需要一种方法来获取特定形状的ID,所以我知道哪一个被点击.想象一下,由到达国家/地区的重叠png组成的地图,您想要检测点击了哪个国家/地区.据我所知,id检测仅适用于矩形区域.有什么建议?
$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ",y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x,y,1,1).data;
var hex = "#" + ("000000" + rgbToHex(p[0],p[1],p[2])).slice(-6);
alert(hex);
});
此代码获取并显示颜色(为清晰起见,findPos和rgbToHex是单独的功能).我需要一个身份证!救命!
图像具有与您编写它们的相反顺序的隐含Z顺序,这意味着图像被写入的下一个图像覆盖,并与之重叠.如果在点击的位置有多个订单,您可以使用它来了解尝试使用哪个订单进行点击测试.唯一的技巧是检测图像像素是否透明.
要检测单个图像中单击的像素点的透明度,可以保留第二个隐藏的画布元素.清除它,然后在同一位置将目标图像写入其中,并使用相同的代码查看第二个画布中的单击像素是否为透明色.如果是,请使用Z顺序中的下一个图像重复此过程,直到获得单击非透明像素的图像.
一个小但重要的优化是首先检查点击的颜色,如果它是透明颜色,您已经知道没有任何图像被点击在非透明点上.
以上是大佬教程为你收集整理的javascript – HTML5命中检测可能吗?全部内容,希望文章能够帮你解决javascript – HTML5命中检测可能吗?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。