<!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. 程序员周末阿里面试，5分钟就被一道题秒杀：HashMap与Hashtable

    你们可能会想,我这么菜的吗?5分钟都坚持不了? 本文说起来会有点尴尬,毕竟这是我曾经经历过的故事 那时候的我还真菜,每天写着 if/ for 及一些简单的业务逻辑代码,虽工作有些日子了,但技术水平还停 ...

  2. Xamarin.Android 使用 SimpleAdapter 打造 ListView 万能适配器

    第一步:创建 layout1.axml 来展示列表详细内容 <?xml version="1.0" encoding="utf-8"?> <L ...

  3. sql server 索引阐述系列三 表的堆组织

    一.   概述 这一节来详细介绍堆组织,通过讲解堆的结构,堆与非聚集索引的关系,堆的应用场景,堆与聚集索引的存储空间占用,堆的页拆分现象,最后堆的使用建议 ,这几个维度来描述堆组织.在sqlserve ...

  4. SpringBoot 常用注解

    @SpringBootApplication  这个配置等同于:@Configuration ,@EnableAutoConfiguration 和 @ComponentScan 三个配置. @Ena ...

  5. 翻译wiki(一)：Bios boot partition

    文章翻译自wiki,水平有限,若有错万请见谅.原文:https://en.wikipedia.org/wiki/BIOS_boot_partition BIOS boot partition是一个分区 ...

  6. AngularJs_自定义注入对象_笔记1

    A-自定义控件示例: 我的自定义控件文件为:angular-seagull2-common.js (function (window, angular) { 'use strict'; $urlPro ...

  7. [转] javascript 保留两位小数 (且不四舍五入)

    本文转自:https://blog.csdn.net/qq_40171039/article/details/79729503 保留两位小数且不四舍五入: 方法一: var a = 2.461; va ...

  8. C# 可访问性不一致问题（修改成员的访问修饰符）。

    错误实例一:父类的访问性低于子类 class Person { } public class Students:Person { } 错误实例二:方法的访问修饰符需要和参数的类型的访问修饰符一致 cl ...

  9. oracle表空间大小的限制和DB_BLOCK_SIZE的概念

    之前接触的项目表空间最大也不超过10G,所以导入数据库时一直使用导入本地的oracle数据库文件的方法,即根据dmp文件大小设置一个数据文件,设定表空间最大值. --创建表空间,数据文件为'F:\ap ...

  10. log4.net 自定义日志文件名称

    插件化项目中,遇到这样一个需求,每个插件 或者每个方法 一个日志文件,方便后期错误排查 源码地址: https://github.com/xlb378917466/SharpHttpServerCas ...