查看效果请到 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. 题解 P1319 【压缩技术】

    这题是红题,我都觉得我的题解过不了 这道题输入不像别的题,给一个参数 n ,然后输入 n 的倍数个数据,它是给一个 n , 再输入一堆数.看题目,n × n ? 是不是就说明了给出的数和一定,都是 n ...

  2. display:inline-block解决文字有间隙问题

    定义:display:inline-block是使元素以块级元素的形式呈现在行内.意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内联元素的增强. 但是display:in ...

  3. Java程序设计第四次作业内容 第五次作业10月9号发布，为第三章全部例题

    第六题:使用判断语句,根据数字,输出对应的中文是星期几? 直接使用一个if语句的情况 int weekDay=3; if(weekDay==1){ sop("今天是星期一"); } ...

  4. linux系统串口编程实例

    在嵌入式开发中一些设备如WiFi.蓝牙......都会通过串口进行主机与从机间通信,串口一般以每次1bit位进行传输,效率相对慢. 在linux系统下串口的编程有如下几个步骤,最主要的是串口初始化! ...

  5. Duizi and Shunzi HDU - 6188 (贪心）2017 广西ACM／ICPC

    Duizi and Shunzi Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. Java - 静态方法不具有多态性

    class A1 { public static void f() {  System.out.println("A1.f()"); }}class A2 extends A1 { ...

  7. 【原创】大数据量时生成DataFrame避免使用效率低的append方法

      转载请注明出处:https://www.cnblogs.com/oceanicstar/p/10900332.html      ★append方法可以很方便地拼接两个DataFrame df1. ...

  8. centos7安装mongodb3.6

    1. 安装一下centos(6.5) + 虚拟机,在VMware中安装mongodb 2. 下载mongodb最新版本:mongodb-linux-x86_64-3.6.4.tgz,传到centos ...

  9. vue axios请求频繁时取消上一次请求

    一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求 ...

  10. PHP 根据IP获取地理位置

    /** * 根据用户IP获取用户地理位置 * $ip 用户ip */ function get_position($ip){ if(empty($ip)){ return '缺少用户ip'; } $u ...