<!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   .5rem;

            border: 1px solid black;

            display: block;

        }

    </style>

</head>

<body>

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

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

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

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

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

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

    var balls = [];

    /**

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

     * isPointInPath(横坐标, 纵坐标)

     */

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

        var ball = {

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

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

            R: Math.random()* +

        }

        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 = ; i < balls.length; i++){

            cxt.beginPath();

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

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

                cxt.fillStyle = "red";

                cxt.fill();

            }

        }

    });

    function draw(){

        cxt.fillStyle = "blue";

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

            cxt.beginPath();

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

            cxt.fill();

        }

    }

</script>

原文地址:https://www.cnblogs.com/lovling/p/6657966.html

(网页)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. [P5172] Sum

    "类欧几里得算法"第一题 sum [题意] 给入\(n,r\),求\(\sum_{d=1}^n(-1)^{\lfloor d\sqrt r \rfloor}\). [分析] 只需要 ...

  2. vue error:The template root requires exactly one element.

    error:[vue/valid-template-root] The template root requires exactly one element. 原因: 因为vue的模版中只有能一个根节 ...

  3. Python xlrd xlwt 读取写入Excel.

    import xlrd import xlwt #读取 xlrd.Book.encoding = "gbk" wb = xlrd.open_workbook(filename='s ...

  4. Netty源码分析（三）：客户端启动

    Bootstrap Bootstrap主要包含两个部分,一个是服务器地址的解析器组AddressResolverGroup,另一个是用来工作的EventLoopGroup. EventLoopGrou ...

  5. MFC 控件编程之水平滚动条跟垂直滚动条

    MFC 控件编程之水平滚动条跟垂直滚动条 一点水平滚动条的操作 首先在操作滚动条的时候.我们要知道滚动条的一些属性. 比如我们要设置 最大值 最小值. 以及每次递增的值是多少.都要设置. 所有就有一个 ...

  6. Http协议中get和post的区别

    get(默认值)是通过URL传递表单值,数据追加在action属性后面. post传递的表单值是隐藏到http报文体中,url中看不到. get是通过url传递表单值,post通过url看不到表单域的 ...

  7. ZOOKEEPER典型应用场景解析

    zookeeper实现了主动通知节点变化,原子创建节点,临时节点,按序创建节点等功能.通过以上功能的组合,zookeeper能够在分布式系统中组合出很多上层功能.下面就看几个常用到的场景,及使用方式和 ...

  8. 基于SpringMVC+Spring+MyBatis实现秒杀系统【概况】

    前言 本教程使用SpringMVC+Spring+MyBatis+MySQL实现一个秒杀系统.教程素材来自慕课网视频教程[https://www.imooc.com/learn/631].有感兴趣的可 ...

  9. navicat连接不上Linux服务器上的MySQL

    1.首先确定你的linux已经关闭防火墙 详细操作点这里: 如果是公司服务器防火墙比较重要不能关闭,那就麻烦点了,需要在防火墙的配置文件下配置属性. 如果还不能解决,请继续往下看. 2.如果是云服务器 ...

  10. Bootstrap-table使用总结(整合版)

    一.什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这 ...