查看效果请到 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. WordPress免费清新响应式博客/杂志/图片三合一主题Nana

    WordPress免费清新响应式博客/杂志/图片三合一主题Nana 一.主题安装须知 1.本主题必须安装文章点击统计插件:WP-PostViews,可以直接在后台插件→安装插件中直接搜索安装官方最新版 ...

  2. 微信小程序页面跳转绑定点击事件

    https://www.cnblogs.com/mrszhou/p/7931747.html

  3. Zabbix监控oracle各服务器连接数

    需求: 根据机器名查询oracle连接数,并通过zabbix进行监控 脚本: [root@rac1 Zabbix_S]# cat get_conns.py#!/usr/bin/python#codin ...

  4. （SSO）单点登录原理和总结

    一:什么是单点登录(single Sign-On) SSO 是一种统一认证和授权机制,指访问统一服务器不用应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后, 再访问其他应用中 ...

  5. dom 添加删除节点

    //找到 div1 var div1 = document.getElementById("div1"); //创建 一个 p标签 var p = document.createE ...

  6. list变set去重,set交集

    set 取交集 并集 删除没有的元素  不会报错 remove 会报错 https://www.cnblogs.com/alex3714/articles/5717620.html

  7. webpack的配置处理

    1.webpack对脚本的处理 1.Js用什么loader加载? 1>webpack 本身就支持js的加载, 2>通过babel-loader ES2015 加载js,再用 babel-p ...

  8. ES6-总结

    在最近进行的项目中,已经全面使用到ES6,这里对ES6进行整理总结.用得比较多的是带*的内容,这些语法.新增类型.模块调用等从代码量上.可读性上.操作上给项目带来了不少便利.   1.语法 1.1.命 ...

  9. linux 基本指令 归类

    今天 我们来学习一下 最最基础的linux 指令,在我看来 linux的操作就是 增 删 改 查 这四个字. 1 查询 操作用户 woami 2查询登录用户 who am i 2 pwd //查询当前 ...

  10. Android系统中标准Intent的使用

    Android系统用于Activity的标准Intent 1.根据联系人ID显示联系人信息= Intent intent=new Intent(); intent.setAction(Intent.A ...