查看效果请到 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. 使用OpenFileDialog组件打开多个文

    实现效果: 知识运用: OpenFileDialog组件的Multiselect属性 //是否允许多选 public bool Multiselect {get;ser;} FileNames属性 / ...

  2. GBDT回归的原理及Python实现

    一.原理篇 1.1 温故知新回归树是GBDT的基础,之前的一篇文章曾经讲过回归树的原理和实现.链接如下: 回归树的原理及Python实现 1.2 预测年龄仍然以预测同事年龄来举例,从<回归树&g ...

  3. 箭头函数 -------JavaScript

    本文摘要:http://www.liaoxuefeng.com/ ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一 ...

  4. arcgis engine计算点到线的最短距离

    IProximityOperator接口用于获取两个几何图形的距离,以及给定一个Point,求另一个几何图形上离离给定点最近的点.IProximityOperator接口的主要方法有:QueryNea ...

  5. 01_15_Struts2_带参数的结果集

    01_15_Struts2_带参数的结果集 1. 背景说明 服务器端页面跳转的时候,通过struts提供的标签的valuestack可以直接取.服务器端的转发,valuestack的对象属性可以共享. ...

  6. 2.3.3 zerosum 和为零

    #include<bits/stdc++.h> using namespace std; ],a; ]={' ','+','-'}; void out() { ;i<a;i++) c ...

  7. gravity 使用操作。

    gravity 使用操作.最近我司有一个比较奇葩的需求,我们的环境是主从,因为数据量较大会定期的删除数据,最近不行了,要求新建出来一个库 同步正事环境的数据,但是要剔除 delete ,drop,tr ...

  8. 文档处理jQuery，实现添加删除复制

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. mysql中如何不重复插入,mysql 重复的不插入,mysql唯一的插入

    INSERT INTO new_schedules_spider_shipsname ( ID,SCAC,VESSEL,VOYAGE,SERVICE_NAME,MD5 ) SELECT NULL,%s ...

  10. linux三剑客之sed深度实践

    参数: -a:追加文本到指定行后 -i:插入文本到指定行前 1.单行增加 [root@redhat~]#   sed  ' 2a  6,f '  linux.tet 1,a 2,b 6,f 3,c 4 ...