[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"> ...
随机推荐
- JS判断单、多张图片加载完成
转:http://www.daqianduan.com/6419.html 试想,如果模板中有图片,此时如何判断图片是否加载完成? 在此之前来了解一下jquery的ready与window.onloa ...
- opencv与灰度图
https://blog.csdn.net/qq_32211827/article/details/56854985 首先,灰度图可以是一个通道存成图片,也可以是3个通道存成图片,3个通道存成图片,其 ...
- python剑指offer 包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). # -*- coding:utf-8 -*- class Solution: def ...
- 记一次加密算法MD5
通过MessageDigest可以获取到16个字节数组: MessageDigest md5 = MessageDigest.getInstance("MD5"); byte[] ...
- CUDA入门需要知道的东西
CUDA刚学习不久,做毕业要用,也没时间研究太多的东西,我的博客里有一些我自己看过的东西,不敢保证都特别有用,但是至少对刚入门的朋友或多或少希望对大家有一点帮助吧,若果你是大牛请指针不对的地方,如果你 ...
- cuda流测试=basic_single_stream
cuda流测试 /* * Copyright 1993-2010 NVIDIA Corporation. All rights reserved. * * NVIDIA Corporation and ...
- 处理侧滑返回与 ScrollView 手势冲突
与处理双击.单击手势互斥原则一样: // 手势互斥(侧滑返回手势失效后才响应UITableView的滑动手势) [tableView.panGestureRecognizer requireGestu ...
- swift 循环语句
// // main.swift // switch // // Created by lanou on 16/10/21. // Copyright (c) 2016年 lanou. All rig ...
- es6中的类及es5类的实现
目录 类的特点 类的特点 1.类只能通过new得到 在es6中类的使用只能是通过new,如果你将它作为一个函数执行,将会报错. //es6的写法 class Child { constructor() ...
- TO_DATS() AS ABAP_DATE
有的时候一个想不到的小问题,,才是致命的问题!