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

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

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

 <!DOCTYPE html>

 <html>

     <head>

         <title>foo</title>

         <meta charset = "utf-8">

         <script type = "text/javascript" src="jquery.js"></script>

         <style>

             *{margin:0 ; padding : 0;}

             html, body{background-color : black;  height : 100%;width: 100%;}

         </style>

     </head>

     <body>

         <canvas id = "myCanvas" width = "1000" height = "600"></canvas>

         <script type = "text/javascript" src= "pp.js"></script>

     </body>

 </html>

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

关键就在Js部分

首先最关键的三个事件

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

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

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

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

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

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

 var ppPoint = function(x, y)

 {

     this.x = x;

     this.y = y;

 }

 var ppPointArray = new Array();

 var ppMousePressed;
9 var context = document.getElementById('myCanvas').getContext("2d");

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

$('#myCanvas').mousedown(function(e)

{

    if(e.which == 1)// 如果是左键

    {

        ppMousePressed = true;

        var mouseX = e.pageX - this.offsetLeft;

        var mouseY = e.pageY - this.offsetTop;

        ppPointArray.push(new ppPoint(mouseX, mouseY)); //记录路径的第一个点

    }

});

$(window).mouseup(function(e){

    ppMousePressed = false;

});

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

 $('#myCanvas').mousemove(function(e)

 {

     if(ppMousePressed)

     {

         var mouseX = e.pageX - this.offsetLeft;

         var mouseY = e.pageY - this.offsetTop;

         ppDrawLine(mouseX, mouseY);

     }

 });

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

 function ppDrawLine(curX, curY)

 {

     context.beginPath();

     var ppLastPoint = ppPointArray[ppPointArray.length - 1];

     context.moveTo(ppLastPoint.x, ppLastPoint.y);

     context.lineTo(curX, curY);

     context.closePath();

     context.stroke();

     ppPointArray.push(new ppPoint(curX, curY));

 }

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

 $('#myCanvas').mouseenter(function(e){

     var mouseX = e.pageX - this.offsetLeft;

     var mouseY = e.pageY - this.offsetTop;

     ppPointArray.push(new ppPoint(mouseX, mouseY));

 });

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

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

     if(ppMousePressed)

     {

         var mouseX = e.pageX - this.offsetLeft;

         var mouseY = e.pageY - this.offsetTop;

         ppDrawLine(mouseX, mouseY);

     }

 });

这样就很完美了，为了让曲线更加光滑 可以设置 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. gearmand 编译 could not find gperf

    安装步骤: #wget https://launchpad.net/gearmand/1.2/1.1.8/+download/gearmand-1.1.8.tar.gz #tar zxvf gearm ...

  2. 2017.12.14 Java实现-----图书管理系统

    通过对图书的增删改查操作 用数组实现 Manager类 package demo55; import java.util.*; public class Manager { Scanner sc = ...

  3. 如何让图片相对于上层DIV始终保持水平、垂直都居中

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

  4. java基础——线程池

    第2章 线程池 2.1 线程池概念 线程池,其实就是一个容纳多个线程的容器,其中的线程可以反复使用,省去了频繁创建线程对象的操作,无需反复创建线程而消耗过多资源. 我们详细的解释一下为什么要使用线程池 ...

  5. latex目录标题常用宏包说明与示例

    http://blog.sina.com.cn/s/blog_5e16f1770100gyxn.html

  6. rem适配方案

    页面布局单位计算 一般有两大类:绝对长度单位和相对长度单位 绝对长度单位: px 像素:是显示屏上显示的每一个小点,为显示的最小单位 in 英寸,1in = 96px cm 厘米,1cm = 37.8 ...

  7. STL之deque用法

    deque:双端队列 底层是一个双向链表. 常用的有队列的尾部入队.首部出队. 普通队列:queuequeue 模板类的定义在<queue>头文件中.与stack 模板类很相似,queue ...

  8. rpc - 接口返回数据结构的设计

    方案一: 系统级状态  .业务级别的状态同用 code要特殊声明保留状态,如若不声明保留状态,一旦业务开发人员用到了系统级的状态,就有必要侵入的改动业务返回的code(新code与业务欲返回的code ...

  9. Dungeon Master（逃脱大师）-BFS

    Dungeon Master Description You are trapped in a 3D dungeon and need to find the quickest way out! Th ...

  10. A Bug's Life POJ - 2492 （带权并查集）

    A Bug's Life POJ - 2492 Background Professor Hopper is researching the sexual behavior of a rare spe ...