最近社区系统需要支持移动端，其中涉及到用户头像上传，头像有大中小三种尺寸，在PC端，社区用Flash来处理头像编辑和生成，但该Flash控件的界面不友好而且移动端对Flash的支持不好，考虑到这些问题，最后我们选用Canvas来完成图像尺寸缩放和图片数据获取。等边处理头像一般都是正方形，首先我们需要获取图片宽度和高度的最小值，用该最小值作为边长居中裁剪图片，最终得到一个正方形的图片：var ImageEditor = function() {// 用离...
什么是localstorage前几天在老项目中发现有对cookie的操作觉得很奇怪，咨询下来是要缓存一些信息，以避免在URL上面传递参数，但没有考虑过cookie会带来什么问题：① cookie大小限制在4k左右，不适合存业务数据 ② cookie每次随HTTP事务一起发送，浪费带宽我们是做移动项目的，所以这里真实适合使用的技术是localstorage，localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输，但也不是没有...
这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转，从而可以从多个视角来观察HTML5 Logo。在线演示源码下载HTML代码<p class="link-overlay"></p> <canvas id="canvas" style="background-color:#ddd"></canvas>JavaScript代码// bind to window onload handler window.addEventListener(load, onloadHandler, fals...
这是一款基于HTML5的树叶飘落动画，树叶都是图片，并非CSS3绘制，但是树叶飘落的动画效果非常逼真。这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。在线演示源码下载HTML代码<p id="container"><!-- The container is dynamically populated using the init function in leaves.js --><!-- Its dimensions and position are defined using its id selector in leaves.css --><p id=...
简单选择排序，是选择排序算法的一种。基本思想：每趟从待排序的记录中选出关键字最小的记录，顺序放在已排序的记录序列末尾，直到全部排序结束为止。由于在每次循环中，会对数值相等的元素改变位置，所以属于非稳定排序。---------------------------------------------------------------------如下图所示：对简单选择排序的优化方案，是采用二元选择排序，即将其改进为每趟循环确定两个元素（当前趟最大和最小记录）的位置,从而...
这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。在线演示源码下载HTML代码<p id="level"><p id="content"><p id="gears"><p id="gears-static"></p><p id="gear-system-1"><p class="shadow" id="shadow15"></p><p id="ge...
也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。在线演示源码下载HTML代码<p style="display:none"><video id="sourcevid" autoplay="true" loop="true"><source src="BigBuckBunny_64...
这是一款基于HTML5的焦点图动画，它和其他焦点图不同的地方在于，它播放的不仅仅是图片，而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。在线演示源码下载HTML代码<p class="parallax-bg" id="slider-wrap"><p class="slider parallax-bg" id="slider"><p class="slider-sec...
这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。在线演示源码下载HTML代码<p class="book p3d"><p class="back-cover p3d"><p class="page back flip"></p><p class="page front p3d"><p class="shadow"></p><p class="dino"></p></p></p><p class="front-cover p3d"><p class="page front flip p3d"><p...
这是一款基于HTML5的3D水波动画特效，它的效果非常逼真，水池中的石头在水中沉浮，泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池，3D效果非常不错。另外，我们可以按“G”键来让水池中的石头上下浮动，按“L”键添加灯光效果，设计相当完美。同时说明一下，这款3D水波动画是基于WebGL渲染技术的，大家可以了解一下WebGL。在线演示源码下载HTML代码<img id="tiles" src="tiles.jpg"> <img id="xneg" src="xneg.jpg...
一实现思路：实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。二程序效果如下：三关键程序解析：绘制半圆的程序，其中200，200表示开始绘制圆心点坐标，第三个参数150表示绘制圆的半径第...
HTML5发布已经有很长一段时间了，一直以来从来没有仔细的看过，过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大，不怪很多牛人预言Flash已死，死不死不是我要关心的，我关心的Canvas可以很轻松在网页中实现简单相框和图像灰度化。一起来看看HTML5 Canvas是怎么做到的吧！1. 新建一个html页面，在body tag之间加入<canvas id="myCanvas" >Gray Filter</canvas>2. 添加一段最简单的JavaScript代码：window.onload = functi...
椭圆与椭圆运动：var canvas=document.getElementById("ballBroad");var context=canvas.getContext("2d");//角度var angle=0;//角度步长var speedAngle=0.1;//刷新频率var frames=1000/60;//球对象var Ball=function(radius,color,x,y){this.radius=radius;this.color=color;this.x=x;this.y=y;}//中心点var centerX=canvas.width/2;var centerY=canvas.height/2;//存放小球走过的点var points=[];//创建一个球var newBall=new Ba...
这是一款基于HTML5和JavaScript的进度条应用，这款进度条插件非常有特点，它在进度展示的时候呈现粒子的动画效果，也就是说，进度条在滑动的同时，会产生一些小粒子掉落下来，效果非常酷。另外还有一个特点是随着进度的变化，进度条的颜色也会变化。在线演示源码下载JavaScript代码/*========================================================*/ /* Light Loader /*========================================================*/...
基本思路：首先绘制一个矩形背景，设置颜色为灰色。在背景上绘制一个简单的矩形外边框，然后再绘制一个内边框，接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度，绘制分钟刻度，最后获取当前系统时间，绘制时分秒三个手柄。技术要点：使用HTML5的Canvas 2D绘制对象，主要使用context.save()与context.restore()方法来保存绘制状态和重置绘制状态，使用Transform和fillRect()方法来绘制时钟和分钟刻度。使用draw...