1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
  9.         The current browser does not support Canvas, can replace the browser a try!
  10.     </canvas>
  11.  
  12.     <script>
  13.         var canvas = document.getElementById('canvas');
  14.         var context = canvas.getContext('2d');
  15.         var balls = [];
  16.  
  17.         window.onload = function(){
  18.             // var canvas = document.getElementById('canvas');
  19.  
  20.             canvas.width = 1024;
  21.             canvas.height = 768;
  22.  
  23.             if(canvas.getContext('2d')){
  24.                 // var context = canvas.getContext('2d');
  25.  
  26.                 for(var i=0;i<10;i++){
  27.                     var aBall = {
  28.                         x : Math.random()*canvas.width,
  29.                         y : Math.random()*canvas.height,
  30.                         r : Math.random()*50+20
  31.                     };
  32.                     balls[i] = aBall;
  33.                 }
  34.  
  35.                 draw();
  36.                 canvas.addEventListener("mouseup",detect);
  37.  
  38.             }else{
  39.                 alert('当前游览器不支持Canvas，请更换游览器后再试！');
  40.             }
  41.         }
  42.  
  43.         function draw(){
  44.             for(var i = 0;i<balls.length;i++){
  45.                 context.beginPath();
  46.                     context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
  47.                 context.fillStyle = "#058";
  48.                 context.fill();
  49.             }
  50.         }
  51.  
  52.         function detect(event){
  53.             var x = event.clientX - canvas.getBoundingClientRect().left;
  54.             var y = event.clientY - canvas.getBoundingClientRect().top;
  55.  
  56.             for(var i=0;i<balls.length;i++){
  57.                 context.beginPath();
  58.                 context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
  59.  
  60.                 if(context.isPointInPath(x,y)){
  61.                     context.fillStyle = "red";
  62.                     context.fill();
  63.                 }
  64.             }
  65.         }
  66.  
  67.     </script>
  68. </body>
  69. <script>
  70.     /*总结
  71.  
  72.         //判断事件是不是在canvas内
  73.         context.isPointInPath(x,y)
  74.  
  75.     */
  76. </script>
  77. </html>

canvas-a10isPointPath.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. Java核心技术卷一基础知识-第11章-异常、断言、日志和调试-读书笔记

    第11章 异常.断言.日志和调试 本章内容: * 处理错误 * 捕获异常 * 使用异常机制的技巧 * 使用断言 * 日志 * 调试技巧 * GUI程序排错技巧 * 使用调试器 11.1 处理错误 如果 ...

  2. java 堆 栈 方法区的简单分析

    Java里的堆(heap)栈(stack)和方法区(method) 基础数据类型直接在栈空间分配, 方法的形式参数,直接在栈空间分配,当方法调用完成后从栈空间回收.   引用数据类型,需要用new来创 ...

  3. 《http权威指南》读书笔记15

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  4. Kali学习笔记29：默认安装漏洞

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 默认安装漏洞: 早期Windows默认自动开启很多服务 ...

  5. editormd实现文章详情页面预览

    继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能,之前博客链接:https://blog.csdn.net ...

  6. 五、activiti工作流-学生请假流程

    有了上一节的基础,这节主要讲如何创建一个学生请假流程.部署.运行流程实例.查看任务.执行任务.判断流程实例状态.历史任务(实例)查询.历史活动节点查询 记住,一个正在执行的流程,他的流程定义id无论到 ...

  7. 机器学习入门06 - 训练集和测试集 (Training and Test Sets)

    原文链接:https://developers.google.com/machine-learning/crash-course/training-and-test-sets 测试集是用于评估根据训练 ...

  8. 安装MySQL时候最后一步报无法定位程序输入点fesetround于动态链接库MSVCR120.dll

    今天在装MySQL时到最后一步出现了一个问题[报无法定位程序输入点fesetround于动态链接库MSVCR120.dll]这是由什么原因引起的呢,其实是缺少一个vcredist_x64.exe插件 ...

  9. Python编程Day3—基本运算符、数据类型

    一.基本运算符 1.算数运算 print(10/3) print(10//3) print(10%3) print(10**3) 2.比较运算 print(10==10) print(10!=10) ...

  10. Linux编程 9 (shell类型，shell父子关系，子shell用法)

    一. shell类型 1.1  交互式 bin/ shell程序 当用户登录到某个虚拟控制台终端或是在GUI中启动终端仿真器时,默认的shell程序就会开始运行.系统启动什么样的shell程序取决于你 ...