1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.     canvas {
  6.         border: 1px dashed black;
  7.     }
  8. </style>
  9.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  10. </head>
  11. <body>
  12.    <canvas id="canvas" width="490" height="220"></canvas>
  13.    <div style="margin-left:100px; margin-top: 200px; width:200px; height:100px; border:1px solid red; position:relative;">
  14.        <div id="inner" style="width: 10px; height:10px; background-color: green; position: relative; left: 10px; "></div>
  15.    </div>
  16.    <script>
  17.    context = document.getElementById('canvas').getContext("2d");
  18.  
  19.    $('#canvas').mousedown(function(e){
  20.         console.log(e);
  21.       var mouseX = e.pageX - this.offsetLeft;
  22.       var mouseY = e.pageY - this.offsetTop;
  23.  
  24.       paint = true;
  25.       addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  26.       redraw();
  27.     });
  28.  
  29.     $('#canvas').mousemove(function(e){
  30.       if(paint){
  31.         addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
  32.         redraw();
  33.       }
  34.     });
  35.  
  36.     $('#canvas').mouseup(function(e){
  37.       paint = false;
  38.     });
  39.  
  40.     $('#canvas').mouseleave(function(e){
  41.       paint = false;
  42.     });
  43.  
  44.     var clickX = new Array();
  45.     var clickY = new Array();
  46.     var clickDrag = new Array();
  47.     var paint;
  48.  
  49.     function addClick(x, y, dragging)
  50.     {
  51.       clickX.push(x);
  52.       clickY.push(y);
  53.       clickDrag.push(dragging);
  54.     }
  55.  
  56.     function redraw(){
  57.       context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
  58.  
  59.       context.strokeStyle = "#df4b26";
  60.       context.lineJoin = "round";
  61.       context.lineWidth = 5;
  62.  
  63.       for(var i=0; i < clickX.length; i++) {
  64.         context.beginPath();
  65.         if(clickDrag[i] && i){
  66.           context.moveTo(clickX[i-1], clickY[i-1]);
  67.          }else{
  68.            context.moveTo(clickX[i]-1, clickY[i]);
  69.          }
  70.          context.lineTo(clickX[i], clickY[i]);
  71.          context.closePath();
  72.          context.stroke();
  73.       }
  74.     }
  75.    </script>
  76. </body>
  77. </html>

　　

----------------------------------------------------------------------------------------------

PageX和clientX 的区别
pageX指鼠标在页面上的位置，以页面左侧为参考点
clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。
即当有滚动条时clientX  小于  pageX

clientX 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条

pageX 它们使用的是文档坐标而非窗口坐标

canvas学习相关的一点东西的更多相关文章

  1. phpunit测试学习 1：一点简单的扼要有用的东西的总结 一点入门认识

    16:45 2015/12/8phpunit测试学习 1:一点简单的扼要有用的东西的总结  一点入门认识 具体的入门安装和入门实践请参照文中的推荐博客或网上其他博客推荐博客,我感觉这几篇博客写得很不错 ...

  2. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  3. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  4. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  5. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  6. Kinect for Windows SDK开发学习相关资源

    Kinect for Windows SDK(K4W)将Kinect的体感操作带到了平常的应用学习中,提供了一种不同于传统的鼠标,键盘及触摸的无接触的交互方式,在某种程度上实现了自然交互界面的理想,即 ...

  7. 关于BIOS的一点东西

    关于BIOS的一点东西 编辑删除转载2016-05-20 00:36:36 去把BIOS的每个单词意思都有道一遍就都明白了,BOOT是更改 启动顺序的(台式机一直按del键就会进入BIOS界面,用上下 ...

  8. 学习javascript 的一点感想

    原文:学习javascript 的一点感想 //动态性是指,在一个Javascript对象中,要为一个属性赋值,我们不必事先创建一个字段,只需要在使用的时候做赋值操作即可,如下例:var obj=ne ...

  9. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

随机推荐

  1. $CF1141C Polycarp Restores Permutation$

    \(problem\) 这题的大致意思就是已知数值差值 求1-n的排列 如果能构成排列 则输出这个排列.如果不能则输出-1 排列的值都是 大于1 而小于n的 而且没有相同的数字. 这题最关键的是 怎么 ...

  2. python中set元素为可迭代元素相加

    #a 与 b必须是两个相同类型的可迭代对象 a = "1" b = "2" print(set(a + b))  # {'1', '2'} a = " ...

  3. 卸载Mysql connect 6.9.9

    我们在卸载MySQL的时候,会发现有一个名为“Connector Net X.X.X”(如:Connector Net 6.9.9)软件总是卸载不成功,下面我们来看看解决方法:1. 在C盘的目录下,有 ...

  4. CF831C Jury Marks

    思路: 关键在于“插入”一个得分之后,其他所有得分也随之确定了. 实现: #include <iostream> #include <cstdio> #include < ...

  5. win32绘图基础

     获取设备环境句柄: (1)WM_PAINT消息中: PAINTSTRUCT ps; HDC hdc = BeginPaint(hwnd,&ps); EndPaint(hwnd,&ps ...

  6. html5——css选择器

    复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头    ...

  7. 初识关系型数据库（SQL）与非关系型数据库（NOSQL）

    一.关系型数据库(SQL): Mysql,oracle 特点:数据和数据之间,表和字段之间,表和表之间是存在关系的 例如:部门表 001部分,   员工表 001 用户表,用户名.密码 分类表 和 商 ...

  8. struts.xml详解

    参考自:http://blog.csdn.net/zz_mm/article/details/5460397 1.    深入Struts2的配置文件 本部分主要介绍struts.xml的常用配置. ...

  9. WinMTR使用教程

    WinMTR下载链接:https://share.weiyun.com/53iPoC7 WinMTR官网连接:http://winmtr.net/download-winmtr/ WinMTR 使用方 ...

  10. 2019 支付宝App支付 --- PHP

    SDK下载:https://docs.open.alipay.com/54/106370/;联系客服:https://cschannel.alipay.com/newPortal.htm?scene= ...