html5橡皮檫特效

【html5橡皮檫特效】的更多相关文章

体验效果:http://keleyi.com/keleyi/phtml/html5/32.htm 效果描述: 有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片.效果图如下: 这种刮图的效果,首先想到就是用HTML5的canvas来实现,而canvas的API中,可以清除像素的就是clearRect方法,但是clearRect方法的清除区域矩形,毕竟大部分人的习惯中的橡皮擦都是圆形的,所以就引入了剪辑区域这个强大的功能,也就是clip方法.用法很简单: ctx.save() ctx.…

HTML5火焰文字特效DEMO演示

效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:…

HTML5火焰文字特效DEMO演示---转载

只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5火焰文字特效DEMO演示 - 何问起</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background-color: #00…

纯JavaScript实现HTML5 Canvas六种特效滤镜

纯JavaScript实现HTML5 Canvas六种特效滤镜小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1. 反色 2. 灰色调 3. 模糊 4. 浮雕 5. 雕刻 6. 镜像滤镜原理解释: 1. 反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g,…

16个富有创意的HTML5 Canvas动画特效集合

HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画.本文就是收集了很多非常富有创意的一些canvas动画特效例子,这些例子都非常适合大家学习. 1.HTML5 Canvas高空瀑布下落湖面动画 HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣…

7款让人惊叹的HTML5粒子动画特效(转载)

1.HTML5 Canvas粒子模拟效果这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错.这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感. 在线演示源码下载 2.HTML5火焰文字特效今天我们分享的这款HTML5文字特效是火焰燃烧的效果,比较消耗CPU,但是动画效果还是比较酷的.另外,再推荐一款HTML5文字特效:HTML5像素文字…

7款让人惊叹的HTML5粒子动画特效

HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码下载供大家学习. 1.HTML5 Canvas粒子模拟效果这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错.这里,我们应用了一些HTML5的特性,让这个粒子…

非常酷的jQuery/HTML5图片滑块特效带弹性菜单

新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单,鼠标滑过菜单时可以弹出一张半透明的图片.先来看看效果图. 我们可以在这里看到生动的DEMO演示. 当然,我们光看效果是不行的,还是一起来简单地分析一下实现的源码. 首先是使用最简单的HTML代码来构造这个带菜单的图片滑块框架: <div id="slider-wrapper">…

分享8款令人惊叹的HTML5 Canvas动画特效

HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的HTML5 Canvas动画教程,大家可以一起来看看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现…

9款赏心悦目的HTML5/CSS3应用特效

经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 WebGL实验超酷的HTML5 Canvas波浪墙在HTML5特效中,和水波相关的我们已经分享过两款:HTML5 WebGL水面水波荡漾特效.HTML5水波荡漾动画特效.这又是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演…