[canvas入坑1]canvas 画布拖拽效果

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

[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…

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

查看效果请到 http://philippica.github.io/ 点击paint 嗯,心血来潮想做个东西的一部分 html部分不用多说了,重点就是一个canvas <!DOCTYPE html> <html> <head> <title>foo</title> <meta charset = "utf-8"> <script type = "text/javascript" src…

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

查看效果请到 http://philippica.github.io/ 点击fill 这功能其实实现很low,最早高一看黑书的时候看到了floodfill算法感觉好神奇,转念一想这不就是bfs么!!被高大上名词骗了有木有所以先设置一个阈值var threshold;它的含义和photoshop魔术棒中容差的含义相同,当它等于0时表现出来的功能就是画图的油漆桶然后进行bfs,从鼠标按下的点开始做唔,js里面shift unshift pop push这四个Array上的函数天然的让queu…

[canvas入坑2]模糊效果

查看效果请到 http://philippica.github.io/ 点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算出以前用qt实现过一个高斯模糊,但是js的速度毕竟不能和c++比,为了实现一个比较好的效果,这里在效率和效果方面做了个折中,每一点的值等于以这个点为中心的正方形内所有像素值的平均这样的优点是计算速度快,矩阵天然的存着正方形,所以通过一个O(canvasWidth * canvasHeight)的…

canvas 踩坑记录

一.绘制一个带有多张图片和文字的canvas.要求将一张矩形的图片,放置进去显示为圆角矩形的图片解决方案,先把图片处理成圆角矩形的样子,再放进去就可以了绘制圆角矩形图片的解决方案效果如下图 <img src="http://pics.sc.chinaz.com/files/pic/pic9/201505/apic11973.jpg" width="400" />  <canv…

web前端入坑第二篇：web前端到底怎么学？干货资料！【转】

http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,JS前端实用开发QQ群 :147250970 欢迎加入~! 目录(?)[+] hi,大家好! 我的第一篇文章:[web前端到底是什么?有前途吗?],在我没想到如此 ‘HOT’ 的情况下得到很多好评和有效传播. 也为我近期新开的个人前端公众号:前端你别闹(webunao) 直接增加了几百粉(果然,帅…

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

html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> </head> <body> <canvas id="canvas" style="border-bottom:1px solid #1E90FF;margin:50px auto;display:block;" ></ca…

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

学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageData(width,height); // 用于创建ImageData对象 ctx.getImageData(x,y,width,height); // 用于从canvas中获取ImageData对象 ctx.putImageData(imagedata, x, y, dx, dy, width,…

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

每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ********************************************************************** 效果图和demo 突然翻到了之前用js和dom写的一个colorpicker,比较挫,扔张图就好(old) 这个真的很挫,性能很差,因为每一个可选的颜色值都是一个…

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

当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var canvas=document.getEle…