<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

            display: block;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    var balls = [];

    /**

     * 事件交互, 点击事件为例

     * isPointInPath(横坐标, 纵坐标)

     */

    for(var i = 0; i < 10; i++){

        var ball = {

            X: Math.random()*canvas.width,

            Y: Math.random()*canvas.height,

            R: Math.random()*50 + 20

        }

        balls[i] = ball;

    }

    draw();

    $("#canvas").click(function(){

        //标准的获取鼠标点击相对于canvas画布的坐标公式

        var x = event.pageX - canvas.getBoundingClientRect().left;

        var y = event.pageY - canvas.getBoundingClientRect().top;

        for(var i = 0; i < balls.length; i++){

            cxt.beginPath();

            cxt.arc(balls[i].X, balls[i].Y, balls[i].R, 0, Math.PI*2);

            if(cxt.isPointInPath(x, y)){

                cxt.fillStyle = "red";

                cxt.fill();

            }

        }

    });

    function draw(){

        cxt.fillStyle = "blue";

        for(var i = 0; i < balls.length; i++){

            cxt.beginPath();

            cxt.arc(balls[i].X, balls[i].Y, balls[i].R, 0, Math.PI*2);

            cxt.fill();

        }

    }

</script>

HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath的更多相关文章

  1. (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JS怎样将拖拉事件与点击事件分离？

    帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...

  3. [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  4. Android长按事件和点击事件问题处理，OnItemLongClickListener和OnItemClickListener冲突问题

    今天在做demo时,须要设置ListView的item的长按和点击事件.OnItemLongClickListener和OnItemClickListener,然而点击事件能够实现,可是在长按操作时会 ...

  5. Android长按事件和点击事件 冲突问题

    长按点击的时候默认会触发点击事件,android系统是优先点击的,并且没有返回值:而长按事件是有返回值的,如果返回false,两个事件都会有响应,如果返回true则只响应长按事件.

  6. threejs Object的点击(鼠标)事件(获取点击事件的object)

    objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...

  7. input中blur失去焦点事件与点击事件冲突时如何解决

    方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...

  8. HTML5 移动端 自定义点击事件

    /* 封装的TAP事件 */ (function () { /** * IOS 和 PC 端 只需要创建一次就能一直使用 * Android 手机 每次使用的时候都需要从新创建 */ function ...

  9. android 触摸事件、点击事件的区别

    针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent,还是onClick,亦或是onLongClick事件? 在Android中,一次用户操作可以被不同的View按次序 ...

随机推荐

  1. gcd模板（欧几里得与扩展欧几里得、拓展欧几里得求逆元）

    gcd(欧几里得算法辗转相除法): gcd ( a , b )= d : 即 d = gcd ( a , b ) = gcd ( b , a mod b ):以此式进行递归即可. 之前一直愚蠢地以为辗 ...

  2. ZH奶酪：最简单的Django安装方法（Windows 7）

    前提是你已经在机器上安装了python~并且你的机器能够上网~ 1.进入:https://bootstrap.pypa.io/get-pip.py,ctrl+s保存网页(其实是.py文件)到某一目录: ...

  3. 比jsonpath 更方便的json 数据查询JMESPath 使用

      类似xml 的xpath json 有jsonpath 都是为了方便进行数据查询,但是jsonpath 的功能 并不是很强大,如果为了方便查询可以使用jmespath. 以下为简单使用: 查询格式 ...

  4. Selenium（ThoughtWorks公司开发的web自动化测试工具）

    Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7.8.9).Mozilla Firefox.Mozill ...

  5. Maven的dependency type属性

    官方地址: http://maven.apache.org/ref/3.5.2/maven-model/maven.html (搜索:Some examples are jar, war, ejb-c ...

  6. java 多线程之 线程优先级和守护线程

    线程优先级的介绍 java 中的线程优先级的范围是1-10,默认的优先级是5."高优先级线程"会优先于"低优先级线程"执行. java 中有两种线程:用户线程和 ...

  7. win10禁用自动更新服务

    win10禁用自动更新服务 按Win+R,打开运行,输入"services.msc"打开服务: 找到"Windows Update",选择属性,修改为禁用即可: ...

  8. Linux 下V4l2摄像头采集图片，实现yuyv转RGB,RGB转BMP，RGB伸缩，jpeglib 库实现压缩RGB到内存中，JPEG经UDP发送功(转)

    ./configure CC=arm-linux-gnueabihf-gcc LD=arm-linux-gnueabihf-ld --host=arm-linux --prefix=/usr/loca ...

  9. 虚拟机设置成桥接模式x86_openwrt也可以上网

    一.虚拟机桥接设置 1. 2.选择 虚拟机 >>设置 三.ip设置,要在同一网段,能够分配到路由的ip地址 1.主机ip 2.虚拟机中x86_openwrt ip 四.openwrt设置 ...

  10. 【jmeter】jmeter之-断言和检查点

    断言就类似LoadRunner中的检查点.对上一个请求返回的信息,做字符串.数据包大小.HTML.XML.图片等做判断,确保返回的信息的准确性. 简单的来理解一下,上一章讲到,我们对用户名和密码进行了 ...