<!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. Testing - Tips

    1 --- 冒烟测试.可用性测试和回归测试的区别? 在测试领域中,冒烟测试(smoke test).可用性测试(sanity test)和回归测试(regression test)彼此之间很相似,范围 ...

  2. Android中动态更新ListView（转）

    在使用ListView时,会遇到当ListView列表滑动到最底端时,添加新的列表项的问题,本文通过代码演示如何动态的添加新的列表项到ListView中.实现步骤:调用ListView的setOnSc ...

  3. Android系统如何录制屏幕（录制成mp4格式）

    不管是教学,还是为了演示,如果能将Android手机(或平板)的屏幕录制成视频文件,那是一件非常酷的事(iOS8已经提供了这一功能,能通过OS X直接在Mac上录制iPad.iPhone的屏幕,win ...

  4. 用Qt写软件系列五：一个安全防护软件的制作（2）

    引言 在上一篇中讲述了主窗体的创建和设计.主窗体的无边框效果.阴影效果.拖动事件处理.窗体美化等工作在前面的博客中早就涉及,因此上篇博文中并未花费过多笔墨.这一篇继续讲述工具箱(Tool Button ...

  5. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  6. 【原创】jQuery 仿百度输入标签插件

    1.先上效果图 2.调用方式 <link href="/Styles/tagsinput.css" rel="stylesheet" type=" ...

  7. Emit学习(2) - IL - 常用指令介绍

    学习Emit必不可少的, 会使用到IL中间代码. 初见IL代码, 让我有一种汇编的感觉, 让我想起了, 大学时, 学习8051的汇编语言. 多的就不扯了, 直接进入正题, OpCodes指令集是不是有 ...

  8. 在DevExpress中使用WizardControl控件构建多步向导界面

    利用好的界面控件,往往能做成比较界面体验效果.在一些界面操作里面,我们可能把它拆分为几部进行处理,这个时候引入WizardControl向导控件应该是比较不错的选择了.多步的处理方式,可以让用户避免一 ...

  9. asp.net后台注册js的四种方法

    1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("kel ...

  10. ASP.NET Core 开发-缓存(Caching)

    ASP.NET Core 缓存Caching,.NET Core 中为我们提供了Caching 的组件. 目前Caching 组件提供了三种存储方式. Memory Redis SqlServer 学 ...