[canvas入坑1]canvas 画布拖拽效果
查看效果请到 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 画布拖拽效果的更多相关文章
- [canvas入坑0] Jquery + HTML5 做最简易的画板
查看效果请到 http://philippica.github.io/ 点击paint 嗯,心血来潮想做个东西的一部分 html部分不用多说了,重点就是一个canvas <!DOCTYPE h ...
- [canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能
查看效果请到 http://philippica.github.io/ 点击fill 这功能其实实现很low,最早高一看黑书的时候看到了floodfill算法感觉好神奇,转念一想这不就是bfs么!! ...
- [canvas入坑2]模糊效果
查看效果请到 http://philippica.github.io/ 点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算 ...
- canvas 踩坑记录
一.绘制一个带有多张图片和文字的canvas.要求将一张矩形的图片,放置进去显示为圆角矩形的图片 解决方案,先把图片处理成圆角矩形的样子,再放进去就可以了 绘制圆角矩形图片的解决方案 效果如下图 &l ...
- web前端入坑第二篇:web前端到底怎么学?干货资料! 【转】
http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...
- HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...
- canvas学习笔记:canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- 【canvas系列】用canvas实现一个colorpicker
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- 关于canvas画布使用fillRect()时高度出现双倍效果解决办法
当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...
随机推荐
- Quartz 配置文件属性
主要配置 Property Name Req'd Type Default Value org.quartz.scheduler.instanceName no string 'QuartzSched ...
- JoinQuant策略代码示例
总体回测前 ''' ================================================================================ 总体回测前 === ...
- [BZOJ] 3301: [USACO2011 Feb] Cow Line
康拓展开/逆展开 模板 #include<algorithm> #include<iostream> #include<cstdio> #define int lo ...
- 更改 Linux 语言为中文
查看当前系统语言环境: echo $LANG 查看安了哪些中文语言包 locale -a |grep "zh_CN" 没有输出,说明没有安装,输入下面的命令安装 ...
- Linux产生随机数的几种方法
.echo $RANDOM .openssl rand -base64 .date +%n%N .head /dev/urandom |cksum .cat /proc/sys/kernel/rand ...
- 卸载Redhat 7自带的yum,安装并使用网易163源
由于redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,安装CentOS yum工具,再配置其他源,以下为详细过程:删除redhat原有的yum ...
- jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...
- python中生成器对象和return 还有循环的区别
python中生成器对象和return 还有循环的区别 在python中存在这么一个关键字yield,这个关键字在项目中经常被用到,比如我写一个函数不想它只返回一次就结束那我们就不能用return,因 ...
- Java总结 - List实现类ArrayList&LinkedList
本文是根据源码进行学习的,如果我有什么理解不对的地方请多指正,谢谢您 上面基本就是List集合类的类图关系了,图中省略掉了比如Cloneable等标记接口,那么List分别具体的主要实现类有:Arra ...
- 动态规划:最长上升子序列(二分算法 nlogn)
解题心得: 1.在数据量比较大的时候n^2会明显超时,所以可以使用nlogn 的算法,此算法少了双重循环,用的lower_bound(二分法). 2.lis中的数字并没有意义,仅仅是找到最小点lis[ ...