<!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>

[ javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中 ] javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中方法演示 效果之三的更多相关文章

  1. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  2. 如何用javascript中的canvas让图片自己旋转

    最近在写一个游戏,想让一个人物随着鼠标在原地旋转 在网上找了找,大都是用css写的,但是我为了长远的利益着想选择使用javascript代码中的canvas来解决绘图问题 其中重要的两个方法: con ...

  3. JavaScript图形实例：Canvas API

    1．Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...

  4. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  5. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  6. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  7. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  8. 第七讲：HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  9. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

随机推荐

  1. Android如何避免切换至SurfaceView时闪屏（黑屏闪一下）以及黑屏移动问题

    1.最近的项目中,有一个Activity用到Fragment+ViewPager,其中一个fragment中实现了视频播放的功能,包含有SurfaceView.结果,每次打开程序第一次进入到该Acti ...

  2. Android SlidingMenu 仿网易新闻客户端布局

    前面两篇文章中的SlidingMenu都出现在左侧,今天来模仿一下网易新闻客户端左右两边都有SlidingMenu的效果,以下是网易新闻客户端效果: 不扯闲话了,直接进入正题吧 frame_conte ...

  3. js cookie存储方法

    /*! * jQuery Cookie Plugin v1.4.0 * https://github.com/carhartl/jquery-cookie * * Copyright 2013 Kla ...

  4. Cordova webapp实战开发：（1）为什么选择 Cordova webapp？

    很长时间没有专注写代码了,即使写点代码也主要是写写敏捷个人app,这个App主体内容是我用了一周的时间,使用PhoneGap+JQueryMobile搭建的,之所以会比较快的完成,是因为11年我在做建 ...

  5. Android通过xml文件配置数据库

    之前一段时间自己封装了两个数据库,一个是ORM数据库,另一个是事件流数据库,项目相应的地址如下: ORM数据库:https://github.com/wenjiang/SimpleAndroidORM ...

  6. [UWP]涨姿势UWP源码——IsolatedStorage

    前一篇涨姿势UWP源码分析从数据源着手,解释了RSS feed的获取和解析,本篇则会就数据源的保存和读取进行举例. 和之前的Windows Runtime一样,UWP采用IsolatedStorage ...

  7. Windows 8.1 系统ISO镜像下载或自Win8应用商店升级方法

    1)下载 -- 面向全体用户的Win8.1预览版ISO镜像下载(28日开放): 安装时请输入微软官方提供给大家的产品密钥:NTTX3-RV7VB-T7X7F-WQYYY-9Y92F. 64位简体中文版 ...

  8. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  9. Node魔法堂：NPM入了个门

    一.前言 NPM作为Node的模块管理和发布工具,作用与Ruby的gem.Python的pypl或setuptools.PHP的pear和.Net的Nuget一样.在当前前端工程化极速狂奔的年代,即使 ...

  10. 编写CLR存储过程中使用SqlDataRecord

    温习一下这些天学习的CLR编程,存储过程,函数. 编写CLR的存储过程,运行起来的效率,果然比普通的SQL语句,存储过程或是函数均高. 以后专案需求,或是执行效率较高的SQL,得写成CLR程序,再部署 ...