<!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. HTML5移动Web开发（五）——移动设计之CSS媒介查询

    CSS媒介查询(media query)是响应式设计中很重要的部分,它帮助你实现更加灵活的移动设计. 看示例代码ch01r06_c.html <!doctype html> <htm ...

  2. web接口开发与测试

    最近一直在学习和整理web开发与接口测试的相关资料.接口测试本身毫无任何难度,甚至有很多工具和类库来帮助我们进行接口测试.大多测试人员很难深入了解web接口测试的原因是对web开发不太了解,当你越了解 ...

  3. 自制Https证书并在Spring Boot和Nginx中使用

    白话Https一文中, 介绍了Https存在的目的和工作原理,但多是偏向于原理性的介绍,本文介绍如何一步一步自制一个能够通过浏览器认证的Https证书,并讲解在Spring Boot环境和Nginx环 ...

  4. 【知识积累】服务器端获取客户端的IP地址(当客户端调用由Axis开发的WebService)

    一.前言 由于项目中一个小的模块需要获取客户端的IP地址以保证安全调用webservice接口,项目中客户端使用C#编写,服务器端使用Java编写,服务器端与客户端采用Axis开发的WebServic ...

  5. Elasticsearch增删改查 之 —— Get查询

    GET API是Elasticsearch中常用的操作,一般用于验证文档是否存在:或者执行CURD中的文档查询.与检索不同的是,GET查询是实时查询,可以实时查询到索引结果.而检索则是需要经过处理,一 ...

  6. 在Linux(Ubuntu)下搭建ASP.NET Core环境并运行 继续跨平台

    最新教程:http://www.cnblogs.com/linezero/p/aspnetcoreubuntu.html 无需安装mono,在Linux(Ubuntu)下搭建ASP.NET Core环 ...

  7. jQuery的目标

    jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.jQuery改变ja ...

  8. C#编程总结（十一）数字证书

    C#编程总结(十一)数字证书 之前已经通过文章介绍了数字证书的基础知识,包括加密和数字签名. 具体可见: 1.C#编程总结(七)数据加密——附源码 2.C#编程总结(八)数字签名 这里来讲述数字证书的 ...

  9. 【C#】VS2015开发环境的安装和配置（三）2016-08-03更新

    分类:C#.VS2015.WPF.ASP.NET MVC.Android.iOS.Unity3D: 更新日期:2016-08-03 控制台应用程序.WPF应用程序直接创建即可,这里就不再介绍了.下面仅 ...

  10. Oracle-- (RANK) 排名函数

    内容来自: Oracle® Database SQL Language Reference 11g Release 2 (11.2) E41084-03. empolyees表来自hr方案. RANK ...