<!DOCTYPE html>

<html>

<head>

<style>

    canvas {

        border: 1px dashed black;

    }

</style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>

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

   <div style="margin-left:100px; margin-top: 200px; width:200px; height:100px; border:1px solid red; position:relative;">

       <div id="inner" style="width: 10px; height:10px; background-color: green; position: relative; left: 10px; "></div>

   </div>

   <script>

   context = document.getElementById('canvas').getContext("2d");

   $('#canvas').mousedown(function(e){

        console.log(e);

      var mouseX = e.pageX - this.offsetLeft;

      var mouseY = e.pageY - this.offsetTop;

      paint = true;

      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

      redraw();

    });

    $('#canvas').mousemove(function(e){

      if(paint){

        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);

        redraw();

      }

    });

    $('#canvas').mouseup(function(e){

      paint = false;

    });

    $('#canvas').mouseleave(function(e){

      paint = false;

    });

    var clickX = new Array();

    var clickY = new Array();

    var clickDrag = new Array();

    var paint;

    function addClick(x, y, dragging)

    {

      clickX.push(x);

      clickY.push(y);

      clickDrag.push(dragging);

    }

    function redraw(){

      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#df4b26";

      context.lineJoin = "round";

      context.lineWidth = 5;

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

        context.beginPath();

        if(clickDrag[i] && i){

          context.moveTo(clickX[i-1], clickY[i-1]);

         }else{

           context.moveTo(clickX[i]-1, clickY[i]);

         }

         context.lineTo(clickX[i], clickY[i]);

         context.closePath();

         context.stroke();

      }

    }

   </script>

</body>

</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. 题解报告：hdu 1233 还是畅通工程

    Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能 ...

  2. [转]asp.net MVC 常见安全问题及解决方案

    本文转自:http://www.cnblogs.com/Jessy/p/3539564.html asp.net MVC 常见安全问题及解决方案 一．CSRF (Cross-site request ...

  3. MVC系列学习(五)-传递数据 与 接收数据

    1.控制器向视图传递数据 a.使用ViewData b.使用ViewBag c.使用Model 方式二: d.使用TempData 2.为什么在控制器中设置了一些属性,在视图中可以接受 3.Actio ...

  4. 支付宝小程序日期选择组件datePicker封装

    github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

  5. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html5——3D转换

    角度旋转 rotateX:默认以center绕x轴旋转 rotateY:默认以center绕y轴旋转 rotateZ:默认以cente绕z轴r旋转 //rotateX原点为center==>正值 ...

  7. JS——scroll动画

    固定导航栏 1.计算导航栏到顶部的距离值 2.当scrollTop值大于这个距离值就添加定位,当小于距离值后解除定位 注意事项:当导航栏添加定位之后,导航栏就脱离了文档流,也就是不占位了,下面的盒子就 ...

  8. PyCharm社区版+Django搭建web开发环境

    PyCharm开源社区版不像商业版那样可以直接通过Django来创建项目,必须通过以下几个步骤进行: 1. 创建项目:在cmd命令行下输入:django-admin startproject Demo ...

  9. Lua之尾调函数的用法

    Lua之尾调函数的用法 --当函数的最后返回结果调用另一个函数,称之为尾调函数 function f(x) return g(x) end --由于“尾调用”不会耗费栈空间,所以一个程序可以拥有无数嵌 ...

  10. 内核调试-perf introduction

    perf概念 perf_event Perf_events是目前在Linux上使用广泛的profiling/tracing工具,除了本身是内核(kernel)的组成部分以外,还提供了用户空间(user ...