首页 > 代码库 > [ javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中 ] javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中方法演示 效果之一
[ javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中 ] javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中方法演示 效果之一
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=http://www.mamicode.com/‘./css/index.css‘ />"color: #008080;"> 9 <script type=‘text/javascript‘ src=http://www.mamicode.com/‘./js/jquery-1.12.1.min.js‘></script>"color: #008080;">10 <style type=‘text/css‘>11 html,body,img,canvas {12 margin: 0; padding: 0;13 }14 15 html {16 height: 100%;17 }18 19 body {20 background: #000;21 }22 23 #can {24 background: #FFF; display: block; margin: 25px auto; border-radius: 2px;25 }26 </style>27 <script type=‘text/javascript‘>28 $( function(){29 var can = $( ‘#can‘ ).get( 0 );30 var oCan = can.getContext( ‘2d‘ );31 32 oCan.beginPath();33 oCan.fillStyle = getRandomColor();34 oCan.rect( 20 , 50 , 100 , 100 );35 oCan.fill();36 oCan.closePath();37 38 oCan.beginPath();/* 如果要想只点击最后绘制的图形有效果就使用开始路径和闭合路径包裹起来,如果要作用于整个画布在任何有图形地方点击有效果就只使用一个大的开始及闭合路径包裹起来既可以了 */39 oCan.fillStyle = getRandomColor();40 //oCan.fillRect(200 , 150 , 100 , 100); /* 直接使用这种方式来使用oCan.isPointInPath(x,y)判断是无效的,无论点击哪里都是无效的 返回false */41 oCan.rect( 200 , 150 , 100 , 100 );/* 要想使用 oCan.isPointInPath(x,y)来判断就必须结合使用 37 38 行间代码,否则无效 */42 oCan.fill();43 oCan.closePath();44 45 can.onmousedown = function( ev ){46 var ev = window.event || ev;47 var clientX = ev.clientX - this.offsetLeft;48 var clientY = ev.clientY - this.offsetTop;49 if( oCan.isPointInPath( clientX , clientY ) == 1 /*用于判断在当前路径中是否包含检测点的方法,只检测我们最后绘制出来的图形*/50 || oCan.isPointInPath( clientX , clientY ) == true51 || oCan.isPointInPath() ){ /* 在不同的浏览器中对于布尔值的显示不同 推荐直接使用最后一种方式来进行判断,因为 这是JS中对于布尔值的判断机制 (非0的数值,非空字符串,true均被认为真的)*/52 alert( ‘点击的是在我们最后绘制的图形中...‘ );53 }54 };55 56 function getRandomColor(){57 var num = ‘0xFFFFFF‘;58 var len = Math.ceil( Math.random() * parseInt( num , 16 ) ).toString( 16 );59 if( length < 6 ){60 for( var i = 0 ; i < 6 - len.length ; i++ ){61 len += ‘0‘;62 }63 }64 return ‘#‘ + len;65 }66 } );67 </script>68 </head>69 <body>70 <canvas id=‘can‘ width=‘500‘ height=‘450‘>检测到您的浏览器版本过低,请升级您的浏览器,以获取更好的体验效果...</canvas>71 </body>72 </html>
[ javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中 ] javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中方法演示 效果之一
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。