shawn.xie - 博客园

构建canvas动画框架（一）——通用类的提取

摘要：最近一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。相对于flash，它太底层。如果有给力的编辑器或者给力的框架的话，它就能发挥出更大的威力。于是决定自己写一个简单一点的动画框架，以便能更方便地构建出一些动画效果。我将分几个章节来讲述我这个小动画框架的实现：1.通用类的提取：动画对象与帧对象2.灵与肉的结合：便于拆卸的运动方程3.进度条的实现：canvas的图片预加载4.demo测试：通过一个demo测试框架这一节我们先来说说通用类的提取。其实上一篇文章我已经用到了这种从flash借鉴来的思路：一个动画对象（类似flash中的元件），一个帧对象（类似flash中的帧）。阅读全文

posted @ 2012-07-11 00:15 shawn.xie 阅读(14009) 评论(8) 推荐(6) 编辑

基于html5 input API和css3 颜色渐变的颜色渐变调节器

摘要：老师课下布置的作业，做的扩展性不错，代码分享如下：<!doctype html><html><head> <title>颜色渐变调节器</title> <meta charset='utf-8' /> <style type="text/css"> #canvas{height:100px;width:980px;border:2px black solid;border-radius:10px;} form{padding:20px;} form div{padding:1 阅读全文

posted @ 2012-07-03 14:28 shawn.xie 阅读(3964) 评论(0) 推荐(0) 编辑

面向对象编程方法实现一群圆环的随机运动

摘要：首先说明qq截图效果太丑了，实际效果要比这个漂亮。本例是实现了100个随机颜色随机大小的圆环以随机速度向随机方向移动并碰壁反弹。然后推荐以下两个博客，一篇是canvas动画面向对象实现方法的基本思路，一篇是松峰老师翻译的基于canvas开发简单游戏框架的教程http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5%8A%A8%E7%94%BB%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF/http://www.cn-cuckoo.com/2011/08/10/game-development-with 阅读全文

posted @ 2012-07-03 14:14 shawn.xie 阅读(1043) 评论(0) 推荐(0) 编辑

柔软的canvas时钟

摘要：本例是一个基于canvas的时钟，鼠标滑过的时候会有类似果冻的抖动效果！代码如下：<!doctype html><html><head><meta charset="utf-8"/><title>柔软的canvas时钟</title><style> #myCanvas{margin:50px auto;display:block;}</style></head><body><canvas id="myCanvas" width=& 阅读全文

posted @ 2012-07-03 14:12 shawn.xie 阅读(1214) 评论(0) 推荐(0) 编辑

从一段问题程序窥探js定时器原理

摘要：大家先不要看后面的内容，先看下面这段简短的代码，想象i应该弹出的是多少呢？var t=null;var i=0;function a(){ i++; if(i==20){ return; } t=setTimeout(a,17);}a();alert(i);这就是今天我写效果的时候遇到一个问题，当我设定一个定时器做循环的时候，下面的程序不等我的循环结束就开始运行了。上段程序的答案是"1"。那么为什么程序没等循环完毕就着急地开始运行alert（i）了呢，原因就出在setTimeout的原理上。其实setTimeout和setInterval这两个定时器一旦触发，就是和js程序阅读全文

posted @ 2012-07-03 14:09 shawn.xie 阅读(1405) 评论(0) 推荐(0) 编辑

用hover配合position（纯css）实现网页动态效果

摘要：如上网页效果用js很容易实现，但用纯css实现此动态功能，意在加深对hover和position定位的理解。与大家分享，欢迎指正。可以看到，这种效果底层是a标签，hover状态中凭空弹出一个解释框，我们称为元素2。那么要想让元素2实现弹出效果而且不影响底层a标签的排布，显然应该用相对定位。因此确立了hover配合position的基本方法。我们以a标签为相对定位的基准，代码如下：cssa{ display:block; height:30px; width:30px; background-color:green; float:left; margin-le... 阅读全文

posted @ 2012-07-03 14:05 shawn.xie 阅读(4887) 评论(2) 推荐(1) 编辑

小扣钉