查看效果请到 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. 制作带复选框的ListView控件

    实现效果: 知识运用   ListView控件的GridLines //设置是否在ListView控件中显示网格线 public bool GridLines{get;set} 和CheckBoxes ...

  2. IDEA搭建Maven 的聚合项目

    今天突然想把自己学习在eclipse上的maven聚合项目搭建到IDEA上,结果IDEA有太多的配置步骤,导致失败了很多次,终于在网上找到了一篇博客 https://blog.csdn.net/for ...

  3. 移动端调试利器-vConsole

    现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...

  4. JavaScript深拷贝与浅拷贝的理解

    个人是这么理解深拷贝和浅拷贝的:就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 一起看看我举的浅拷贝栗子: let ...

  5. DDOS与DOS的区别

    0x01 在说之前,先看一些例子吧 还有众所周知的中美黑客大战,新闻我就不说了 0x02 什么是DOS DoS是Denial of Service的简称,即拒绝服务,造成DoS的攻击行为被称为DoS攻 ...

  6. mysql零散操作

    添加对外用户 CREATE USER 'admin'@'%' IDENTIFIED BY '!QAZ2wsx'; GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%'; ...

  7. 原生node实现本地静态页面的展示

    var http = require("http"); var fs = require("fs"); var url = require("url& ...

  8. php面向对象（2）构造和析构函数

    一.构造方法 构造方法是类中一个“特殊”的方法,作用是在实例化一个对象的同时,给该对象的属性赋值,使之创建完成的时就具有其本身的特有属性 该方法固定格式:[访问修饰符] function _const ...

  9. 数据分析处理库Pandas——概述

    导入Pandas库 创建DataFrame结构 读取.csv文件 titanic_train.csv文件:https://files.cnblogs.com/files/gloria-zhang/ti ...

  10. kali下将Python2.x切换至Python3.x

    注:我是将Python2切换到Python3.6版本的,下面文件夹名,请注意变更. 1.首先在/usr/local/下创建一个Python-3.6 注意文件夹名(根建议据自己安装版本命名)mkdir ...