blur(document.getElementById('logo'),'http://s.segmentfault.com/img/logo.png',2); function blur(element, src, strength){ var image = new Image(); image.onload = function(e){ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = this.width; canvas.height = this.height; context.drawImage(this, 0, 0); context.globalAlpha = 0.5; // Higher alpha made it more smooth // Add blur layers by strength to x and y // 2 made it a bit faster without noticeable quality loss for (var y = -strength; y <= strength; y += 2) { for (var x = -strength; x <= strength; x += 2) { context.drawImage(canvas, x, y); } } context.globalAlpha = 1; element.style.backgroundImage = 'url('+canvas.toDataURL()+')'; } image.src = src; }
相关推荐
这是一款带有梦幻感的html5 canvas透明圆点模糊背景动画特效,有点像photoshop的图片滤镜效果。
第二个是凸显弹框效果的,将背景都模糊掉,自己将这个稍微加强了些可以指定模糊一个位置。 针对移动平台,使用高斯模糊,其实效率不是很高,如果要很好的效果,那么速度卡;如果要速度快,那么效果达不到要求。但是...
HTML5 Canvas虚幻圆点背景特效是一款HTML5基于Canvas绘制的模糊圆点粒子动画背景特效。
首先我创建了一个空的bitmap,把背景的一部分复制进去,之后我会对这个bitmap进行模糊处理并设置为TextView的背景。 通过这个bitmap保存Canvas的状态; 在父布局文件中把Canvas移动到TextView的位置; 把...
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背景图片。不过今天又仔细研究了一下css3中的blur...
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,...
canvas海报内容有背景图,圆形头像,用户昵称,链接的二维码图片。 问题如下 图片不显示 绘制渲染的时候图像不显示:是因为图片异步加载,所以canvas的操作需要放在onload事件中,否则图片会不显示,因为图片不止...
图片背景 模糊化处理 15s 后 自动关闭
Fabio Sasso制作过一个事例使用了 html2canvas 0.4.1 (js截图库) Stackblur (图片模糊处理) 完成了一个半透明的导航栏 对比通过CSS的改进实现毛玻璃的效果 (image.css 是一个通过base64加密过得图片,可以实现...
文章目录一、canvas在移动端自适应大小canvas坑1:设置canvas的css的宽高会导致你的填充内容被拉伸canvas坑1解决办法:解决后的代码与效果如下:canvas坑2:不能设置css属性如何让它自适应?canvas坑2解决办法:二、...
橡皮擦的实现用了两个canvas,一个临时的,一个是作用在ImageTouchView上显示的,代码里面有注释,这里不再详细介绍。 3.功能展示: 原图: 画笔设置界面: (1)画笔大小为32,透明度为255(不透明)。如下图: ...
在IE工具栏上增加一个按钮图标 软件注册机制的建立 复活节彩蛋的制作 SkinEngine控件——XP换肤 ActionList——应用程序通用功能列表 OleContainer——OLE容器 将程序项设置到控制面板 艺术化排列...
在IE工具栏上增加一个按钮图标 软件注册机制的建立 复活节彩蛋的制作 SkinEngine控件——XP换肤 ActionList——应用程序通用功能列表 OleContainer——OLE容器 将程序项设置到控制面板 艺术化排列桌面图标 Delphi中...
ToolBar工具栏控件的使用动态建立主菜单选项窗口界面的动态分隔条动态...Canvas生成渐变色窗口背景WINAPM风格磁化窗口软件封面的图片显示制作实现图片的任意角度旋转奇妙的拼图游戏使用PaintBox控件制作画图程序使用...
9.2.5 在另外一个页面中宿主页面 212 9.2.6 在Web浏览器中宿主页面 213 9.3 页面历史 214 9.3.1 深入分析WPF中的URI 214 9.3.2 导航历史 215 9.3.3 维护自定义的属性 216 9.4 导航服务 217 9.4.1 通过编程...
ToolBar工具栏控件的使用 动态建立主菜单选项 窗口界面的动态分隔...Canvas生成渐变色窗口背景 WINAPM风格磁化窗口 软件封面的图片显示制作 实现图片的任意角度旋转 奇妙的拼图游戏 使用PaintBox...
3.1.2 派生一个自定义的 Application类 49 3.1.3 应用程序的关闭方式 51 3.1.4 应用程序事件 51 3.2 Application类的任务 53 3.2.1 处理命令行参数 54 3.2.2 访问当前Application对象 55 3.2.3 在窗口之间进行交互 ...
ToolBar工具栏控件的使用 动态建立主菜单选项 窗口界面的动态...Canvas生成渐变色窗口背景 WINAPM风格磁化窗口 软件封面的图片显示制作 实现图片的任意角度旋转 奇妙的拼图游戏 使用...
16. 怎样给每一个在线用户建立一套变量,在用户断开后立即清除 ............................. 18 17. TUniHiddenPanel 的作用 ....................................................................................