[ javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中 ] javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中方法演示 效果之三
2024-10-15 17:01:04
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<title>Insert you title</title>
<meta name='description' content='this is my page'>
<meta name='keywords' content='keyword1,keyword2,keyword3'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel='stylesheet' type='text/css' href='./css/index.css' />
<script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
<style type='text/css'>
html,body,img,canvas {
margin: 0; padding: 0;
} html {
height: 100%;
} body {
background: #000;
} #can {
background: #FFF; display: block; margin: 25px auto; border-radius: 2px;
}
</style>
<script type='text/javascript'>
$( function(){
var can = $( '#can' ).get( 0 );
var oCan = can.getContext( '2d' );
oCan.fillStyle = getRandomColor();
oCan.beginPath();
oCan.fillRect( 20 , 50 , 100 , 100 ); /* 如果只使用一个大的开始及闭合路径来包裹多个图形,如果使用这种方式来绘制,那么也只是在点击最后一个使用40 41行间代码 绘制的图形有效果*/
oCan.fillStyle = getRandomColor();
//oCan.fillRect(200 , 150 , 100 , 100); /* 直接使用这种方式来使用oCan.isPointInPath(x,y)判断是无效的,无论点击哪里都是无效的 返回false */
oCan.rect( 200 , 150 , 100 , 100 );/* 要想使用 oCan.isPointInPath(x,y)来判断就必须结合使用 37 38 行间代码,否则无效 */
oCan.fill();
oCan.closePath(); can.onmousedown = function( ev ){
var ev = window.event || ev;
var clientX = ev.clientX - this.offsetLeft;
var clientY = ev.clientY - this.offsetTop;
if( oCan.isPointInPath( clientX , clientY ) == 1 /*用于判断在当前路径中是否包含检测点的方法,只检测我们最后绘制出来的图形*/
|| oCan.isPointInPath( clientX , clientY ) == true
|| oCan.isPointInPath() ){ /* 在不同的浏览器中对于布尔值的显示不同 推荐直接使用最后一种方式来进行判断,因为 这是JS中对于布尔值的判断机制 (非0的数值,非空字符串,true均被认为真的)*/
alert( '点击的是在我们最后绘制的图形中...' );
}
}; function getRandomColor(){
var num = '0xFFFFFF';
var len = Math.ceil( Math.random() * parseInt( num , 16 ) ).toString( 16 );
if( length < 6 ){
for( var i = 0 ; i < 6 - len.length ; i++ ){
len += '0';
}
}
return '#' + len;
}
} );
</script>
</head>
<body>
<canvas id='can' width='500' height='450'>检测到您的浏览器版本过低,请升级您的浏览器,以获取更好的体验效果...</canvas>
</body>
</html>
最新文章
- Zookeeper学习之:paxos算法
- 在cmd和terminal怎么粘贴?
- XmlHelper
- 如何限制一个类只在堆上分配和栈上分配(StackOnly HeapOnly)
- 频谱分析仪 RBW&;VBW
- JPush (极光推送) For Xamarin.Android
- git常见问题解决办法
- CSS之position
- C#&;java重学笔记(函数)
- 跟我学机器视觉-HALCON学习例程中文详解-FUZZY检测用于开关引脚测量
- Bellman 算法
- 使用USBASP给Arduino烧写bootloader教程
- APP热更新方案
- 容器_JDK源码分析_自己简单实现ArrayList容器
- SpringBoot 中常用注解
- Python 基础【二】 上
- Oracle问题整合
- webpack4
- LocalVariableTable之 Slot 复用
- Java学习笔记之——自动装箱与拆箱
热门文章
- [转载]";百度方法+";案例—从持续集成到持续交付
- 优化数据库的方法及SQL语句优化的原则
- 关于WEB Service&;WCF&;WebApi实现身份验证之WCF篇(1)
- python数据库(mysql)操作
- 音频文件解析(一):WAV格式文件头部解析
- 从客户端中检测到有潜在危险的 Request.Form 值 --MVC
- 【C#】VS2015开发环境的安装和配置(三)2016-08-03更新
- ACm-ICPC Live Archive 7464---Robots
- 指针,&;的用法
- php函数的传值如果需要引用传递注意的细节