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

和上一篇画图很像,所以有些部分做了省略

当鼠标按下时保存当前画布上的内容到ppImgData中,并且记录下初始点的位置,当鼠标移动时调用ppDrag函数

     $('#myCanvas').unbind();
$('#myCanvas').mousemove(function(e)
{
if(ppMousePressed)
{
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
context.clearRect(0, 0, ppCanvasWidth, ppCanvasHeight);//清屏
ppDrag(mouseX, mouseY);
}
});
$('#myCanvas').mousedown(function(e)
{
if(e.which == 1)//茹果是左键
{
ppMousePressed = true;
ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);//保存当前画布
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
ppInitialPoint = new ppPoint(mouseX, mouseY);//记录鼠标初始位置
}
});
$(window).mouseup(function(e){
ppMousePressed = false;
});

所以关键就是ppDrag怎么写

然后也挺简单的,putImageData函数的后两个参数是画出图像的左上角坐标,然后就可以根据鼠标的初始位置、鼠标当前位置计算(其实就是做个差)出当前应该画的位置了

 function ppDrag(curX, curY)
{
var dX = curX - ppInitialPoint.x;
var dY = curY - ppInitialPoint.y;
console.info(dX+" "+dY);
context.putImageData(ppImgData, dX, dY);
}

[canvas入坑1]canvas 画布拖拽效果的更多相关文章

  1. [canvas入坑0] Jquery + HTML5 做最简易的画板

    查看效果请到 http://philippica.github.io/  点击paint 嗯,心血来潮想做个东西的一部分 html部分不用多说了,重点就是一个canvas <!DOCTYPE h ...

  2. [canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能

    查看效果请到 http://philippica.github.io/  点击fill 这功能其实实现很low,最早高一看黑书的时候看到了floodfill算法感觉好神奇,转念一想这不就是bfs么!! ...

  3. [canvas入坑2]模糊效果

    查看效果请到 http://philippica.github.io/  点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算 ...

  4. canvas 踩坑记录

    一.绘制一个带有多张图片和文字的canvas.要求将一张矩形的图片,放置进去显示为圆角矩形的图片 解决方案,先把图片处理成圆角矩形的样子,再放进去就可以了 绘制圆角矩形图片的解决方案 效果如下图 &l ...

  5. web前端入坑第二篇:web前端到底怎么学?干货资料! 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  6. HTML5 canvas画布写炫彩动态的倒计时效果

    html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...

  7. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  8. 【canvas系列】用canvas实现一个colorpicker

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  9. 关于canvas画布使用fillRect()时高度出现双倍效果解决办法

    当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Quartz 配置文件属性

    主要配置 Property Name Req'd Type Default Value org.quartz.scheduler.instanceName no string 'QuartzSched ...

  2. JoinQuant策略代码示例

    总体回测前 ''' ================================================================================ 总体回测前 === ...

  3. [BZOJ] 3301: [USACO2011 Feb] Cow Line

    康拓展开/逆展开 模板 #include<algorithm> #include<iostream> #include<cstdio> #define int lo ...

  4. 更改 Linux 语言为中文

    查看当前系统语言环境:    echo $LANG 查看安了哪些中文语言包    locale -a |grep "zh_CN" 没有输出,说明没有安装,输入下面的命令安装     ...

  5. Linux产生随机数的几种方法

    .echo $RANDOM .openssl rand -base64 .date +%n%N .head /dev/urandom |cksum .cat /proc/sys/kernel/rand ...

  6. 卸载Redhat 7自带的yum,安装并使用网易163源

    由于redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,安装CentOS yum工具,再配置其他源,以下为详细过程:删除redhat原有的yum ...

  7. jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)

    第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...

  8. python中生成器对象和return 还有循环的区别

    python中生成器对象和return 还有循环的区别 在python中存在这么一个关键字yield,这个关键字在项目中经常被用到,比如我写一个函数不想它只返回一次就结束那我们就不能用return,因 ...

  9. Java总结 - List实现类ArrayList&LinkedList

    本文是根据源码进行学习的,如果我有什么理解不对的地方请多指正,谢谢您 上面基本就是List集合类的类图关系了,图中省略掉了比如Cloneable等标记接口,那么List分别具体的主要实现类有:Arra ...

  10. 动态规划:最长上升子序列(二分算法 nlogn)

    解题心得: 1.在数据量比较大的时候n^2会明显超时,所以可以使用nlogn 的算法,此算法少了双重循环,用的lower_bound(二分法). 2.lis中的数字并没有意义,仅仅是找到最小点lis[ ...