<!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. L2-013. 红色警报

    战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个城市并不 ...

  2. tarjan强联通分量（模板）

    #include<cstdio> #include<cstring> #include<cstdlib> #include<iostream> #inc ...

  3. 2018-2019-2 20165212《网络对抗技术》Exp1 PC平台逆向破解

    2018-2019-2 20165212<网络对抗技术>Exp1  缓冲区溢出实验 实验点1:逆向及Bof基础实践 实践任务 用一个pwn1文件. 该程序正常执行流程是:main调用foo ...

  4. 手把手图文教你eclipse下如何配置tomcat

    很多初学,尤其自学JavaWeb的朋友首次在eclipse下配置tomcat时,总会有种难下手的感觉,在此,笔者通过图文解说的方法,最直观的向大家演示一遍该配置过程,希望对大家有所帮助. 注:本文是建 ...

  5. oclif cli app开发简单试用

    oclif 是heroku 开源的cli 开发框架,有一篇关于12 factor cli app 开发的文章很值得看看 https://medium.com/@jdxcode/12-factor-cl ...

  6. 如何判断一个请求是否为AJAX请求

    普通请求与ajax请求的报文头不一样,通过如下 String requestType = request.getHeader("X-Requested-With");  如果req ...

  7. PHP独立环境搭建细节

    一．安装前准备: 准备安装软件此处以以下软件为例: Appache:httpd-2.2.21-win32-x86-openssl-0.9.8r.msi MySQL: mysql-5.5.21-win ...

  8. 【转】每天一个linux命令（15）：tail 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/07/2758084.html tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f ...

  9. Oracle 11gR2 RAC 新特性说明

    最近接触了一下Oracle 11g R2 的RAC,发现变化很大. 所以在自己动手做实验之前还是先研究下它的新特性比较好. 一．    官网介绍 先看一下Oracle 的官网文档里对RAC 新特性的一 ...

  10. Spring MVC 向页面传值-Map、Model、ModelMap、ModelAndView

    Spring MVC 向页面传值,有4种方式: ModelAndView Map Model ModelMap 使用后面3种方式,都是在方法参数中,指定一个该类型的参数. Model Model 是一 ...