<!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. H5在WebView上开发小结

    背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...

  2. kibana6.2.4版本更新x-pack认证

    我在上一次介绍了如何安装时基本使用elk留下了一个问题,这次来解决这个问题,相必大家也想知道,接下来就看详细过程. 上次说到,直接看图吧. 因为x-pack是收费的,所以试用期只有一个月.长期使用就必 ...

  3. DotNetCore深入了解之二HttpContext类

    当KestrelServer启动时,会绑定相应的IP地址,同时在绑定时将加入HttpConnectionMiddleware作为终端连接的中间件. public async Task StartAsy ...

  4. web.xml配置web中的key points(下)

    一.配置jsp页面 [jsp-config]中有两个子元素[taglib][jsp-property-group],注意,前者必须出现在后者之前. ①[taglib]替代jsp页面中taglib指令 ...

  5. socket的阻塞与非阻塞，同步与异步

    同步/异步主要针对C端: 同步:      所谓同步,就是在c端发出一个功能调用时,在没有得到结果之前,该调用就不返回.也就是必须一件一件事做,等前一件做完了才能做下一件事. 例如普通B/S模式(同步 ...

  6. ES6躬行记（9）——字符串

    在介绍字符串之前,有必要先了解一点Unicode的基础知识,有助于理解ES6提供的新功能和新特性. 一.Unicode Unicode是一种字符集(即多个字符的集合),它的目标是涵盖世界上的所有字符, ...

  7. Android Handler 机制总结

    写 Handler 原理的文章很多,就不重复写了,写不出啥新花样.这篇文章的主要是对 handler 原理的总结. 1.Android消息机制是什么? Android消息机制 主要指 Handler ...

  8. centos7安装Wkhtmltopdf

    从官网下载预编译版安装: wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.4/wkhtmltox-0.12 ...

  9. [转]VirtualBox安装CentOS7

    本文转自:http://www.cnblogs.com/xyinjie/p/9437049.html 一:.下载CentOS7的镜像 下载地址:https://www.centos.org/downl ...

  10. double在输出为字符串的几种方法效率测试

    测试结果: double->none 366msdouble->long 161msdouble->long2 188msdouble->format 564msdouble- ...