查看效果请到 http://philippica.github.io/  点击paint

嗯,心血来潮想做个东西的一部分

html部分不用多说了,重点就是一个canvas

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <title>foo</title>
  5.          <meta charset = "utf-8">
  6.          <script type = "text/javascript" src="jquery.js"></script>
  7.          <style>
  8.              *{margin:0 ; padding : 0;}
  9.              html, body{background-color : black;  height : 100%;width: 100%;}
  10.          </style>
  11.      </head>
  12.      <body>
  13.          <canvas id = "myCanvas" width = "1000" height = "600"></canvas>
  14.          <script type = "text/javascript" src= "pp.js"></script>
  15.      </body>
  16.  </html>

嘛把背景设成黑色只是我的恶趣味

关键就在Js部分

首先最关键的三个事件

1.鼠标按下(开始画线)

2.鼠标移动(如果鼠标处于按下状态画线)

3.鼠标松开(停止画线)

此外还有两个事件,即当鼠标移出canvas的时候，和进入canvas的时候,这是两个细节,下面再说

画线采用多条直线拼接的方式画曲线

首先确定一个bool变量ppMousePressed 表示鼠标此时是否按下,ppPointArray记录下每个点的位置,方便以后做进一步的包括撤销等命令

  1.  var ppPoint = function(x, y)
  2.  {
  3.      this.x = x;
  4.      this.y = y;
  5.  }
  6.  
  7.  var ppPointArray = new Array();
  8.  var ppMousePressed;
    9 var context = document.getElementById('myCanvas').getContext("2d");

当鼠标按下时除了要设置ppMousePressed，还要记录画的第一个点，注意松开鼠标这一事件应该是整个窗口的而不仅仅是canvas

  1. $('#myCanvas').mousedown(function(e)
  2. {
  3.     if(e.which == 1)// 如果是左键
  4.     {
  5.         ppMousePressed = true;
  6.         var mouseX = e.pageX - this.offsetLeft;
  7.         var mouseY = e.pageY - this.offsetTop;
  8.         ppPointArray.push(new ppPoint(mouseX, mouseY)); //记录路径的第一个点
  9.     }
  10. });
  11.  
  12. $(window).mouseup(function(e){
  13.     ppMousePressed = false;
  14. });

当鼠标移动的时候，如果鼠标按下,那么画线

  1.  $('#myCanvas').mousemove(function(e)
  2.  {
  3.      if(ppMousePressed)
  4.      {
  5.          var mouseX = e.pageX - this.offsetLeft;
  6.          var mouseY = e.pageY - this.offsetTop;
  7.          ppDrawLine(mouseX, mouseY);
  8.      }
  9.  });

画线ppDrawLine函数只要向数组中上一个点连线即可,并向数组插入新的点

  1.  function ppDrawLine(curX, curY)
  2.  {
  3.      context.beginPath();
  4.      var ppLastPoint = ppPointArray[ppPointArray.length - 1];
  5.      context.moveTo(ppLastPoint.x, ppLastPoint.y);
  6.      context.lineTo(curX, curY);
  7.      context.closePath();
  8.      context.stroke();
  9.      ppPointArray.push(new ppPoint(curX, curY));
  10.  }

到这里画板的功能大体能用了,但是发现当鼠标移出canvas后再回到canvas会向刚才离开的那个点连线,一个好的方法是当鼠标移入的时候新加一个点为鼠标移入的位置：

  1.  $('#myCanvas').mouseenter(function(e){
  2.      var mouseX = e.pageX - this.offsetLeft;
  3.      var mouseY = e.pageY - this.offsetTop;
  4.      ppPointArray.push(new ppPoint(mouseX, mouseY));
  5.  });

另一个问题是当鼠标移出过快时线在移出canvas的地方会有不完整,这是由于mousemove反应过来时你已经移出canvas了,可行的方法是当移出的时候强制在移出位置和上一个点连线

  1.  $('#myCanvas').mouseleave(function(e){
  2.      if(ppMousePressed)
  3.      {
  4.          var mouseX = e.pageX - this.offsetLeft;
  5.          var mouseY = e.pageY - this.offsetTop;
  6.          ppDrawLine(mouseX, mouseY);
  7.      }
  8.  });

这样就很完美了，为了让曲线更加光滑 可以设置 context.lineJoin = "round";

[canvas入坑0] Jquery + HTML5 做最简易的画板的更多相关文章

  1. [canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能

    查看效果请到 http://philippica.github.io/  点击fill 这功能其实实现很low,最早高一看黑书的时候看到了floodfill算法感觉好神奇,转念一想这不就是bfs么!! ...

  2. [canvas入坑2]模糊效果

    查看效果请到 http://philippica.github.io/  点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算 ...

  3. [canvas入坑1]canvas 画布拖拽效果

    查看效果请到 http://philippica.github.io/  点击drag 和上一篇画图很像,所以有些部分做了省略 当鼠标按下时保存当前画布上的内容到ppImgData中,并且记录下初始点 ...

  4. RoboGuice 3.0 （一）入坑篇

    RoboGuice是什么? 一个Android上的依赖注入框架. 依赖注入是什么? 从字面理解,这个框架做了两件事情,第一是去除依赖,第二是注入依赖.简单理解就是,将对象的初始化委托给一个容器控制器, ...

  5. web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  6. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  7. Vue2.0史上最全入坑教程（下）—— 实战案例

    书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...

  8. web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  9. 大神都在看的RxSwift 的完全入坑手册

    大神都在看的RxSwift 的完全入坑手册 2015-09-24 18:25 CallMeWhy callmewhy 字号:T | T 我主要是通过项目里的 Rx.playground 进行学习和了解 ...

随机推荐

  1. javaweb基础(30)_EL函数库

    一.EL函数库介绍 由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 这些EL函数在JSTL开发包中进行描述,因此在JSP页 ...

  2. k8s的service简述

    k8s向集群外部暴露端口的3种方式: 1.service->nodePort :仅暴露一个宿主机端口,用于集群外部访问,因为此操作被写入各个节点的iptables或ipvs规则当中,可以用任意一 ...

  3. tp5 修改自带success或error跳转模板页面

    tp5 修改自带success或error跳转模板页面 我们在使用tp5或者tp3.2的时候,用的成功或者失败跳转提示页面一般是用框架的.在后续开发过程中,根据实际项目需要,也是可以更改的,在此分享一 ...

  4. 07.VUE学习之解决phpstorm不识别ECMASCRIPT6语法的问题

    此时已经识别:

  5. Python9-前端基础知识-day47

    web开发本质: 1.浏览器输入网址回车都发生了什么? 1.浏览器给服务端发送一个消息 2.服务端拿到消息 3.服务端返回消息 4.浏览器展示页面C/S架构----B/S架构客户端和服务端 消息的格式 ...

  6. Ubuntu强制卸载VMware-player

    有时候安装了vmwar-player,想再安装vmware-workstation,却提示一些古怪的消息(现在忘记具体是什么了).只能先卸载再安装 首先你可以尝试常规卸载: sudo vmware-i ...

  7. 748. Shortest Completing Word

    https://leetcode.com/problems/shortest-completing-word/description/ class Solution { public: string ...

  8. 51nod 1202 不同子序列个数（计数DP）

    1202 子序列个数 基准时间限制:1 秒 空间限制:131072 KB 分值: 40      子序列的定义:对于一个序列a=a[1],a[2],......a[n].则非空序列a'=a[p1],a ...

  9. 全球征集-如何实现回文SQL的查询

    有个表,以下是创建的SQL: CREATE TABLE [dbo].[SysName]( ,) NOT NULL, ) COLLATE Chinese_PRC_CI_AS NULL, ) COLLAT ...

  10. JS 对于回调函数的理解，和常见的使用场景应用，使用注意点

      很经常我们会遇到这样一种情况: 例如,你需要和其他人合作,别人提供数据,而你不需要关注别人获取或者构建数据的方式方法. 你只要对这个拿到的数据进行操作. 这样,就相当于我们提供一个外在的函数,别人 ...