使用Canvas实现动画效果
这是动手开发一个HTML5赛车小游戏系列文章。你可以查看前一篇内容：
这里我们使用Canvas开发这个游戏，而不是采用传统的DOM方式实现，虽然这个简单的游戏使用DOM也可以实现（甚至有可能更容易点）。但是Canvas可以更加方便的控制图片，功能更更加强大，因为你可以完全按照自己的想法进行绘制和操作图像。
Canvas是HTML5中新加入的标签。它定义了一个图形，可以是图表或任何内容，但是它只是一个容器，你必须使用JavaScript来进行绘制图形。Canvas并不是为动画准备的，但是你可以使用它来实现动画效果。
前面介绍过在HTML中如何使用JavaScript实现DOM的动画效果：
其实使用Canvas中的动画实现某种程度也利用了同样的思想。快速的定时的改变所绘制的图形的位置。当然Canvas上所绘制的图形不会自动消失，如果你不断的画图形会不断的重复出现在画布中，所以你需要在重绘之前清除画布，这样你得到的才是动画而不是动画的轨迹。
JavaScript中没有诸如sleep等阻塞的方法，所以我们需要使用setTimeout或setInterval来实现定时执行的功能。大部分现代浏览器中提供了一个新的方法requestAnimationFrame来代替普通的定时器，这是由FireFox首先实现的，虽然目前还不是标准，但是大部分现代浏览器中已经支持这个方法，你可能需要使用不同的前缀调用它，如：mozRequestAnimationFrame或webkitRequestAnimationFrame。这个方法类似setTimeout，它由浏览器自行判断执行的时机，当页面不可见时它会自动降频，以达到节约资源的目的。它是你实现动画的最佳选择。它的执行频率大于是每秒60次，因为这是浏览器刷新的极限，如果再高对浏览器来说就没有意义了。当然对于不支持的浏览器我们可以使用setTimeout或setInterval来代替，相信你可以很容易的实现类似功能。下面是一个兼容的写法：
window.requestAnimFrame = (function() {
oreturn window.requestAnimationFrame
o|| window.webkitRequestAnimationFrame
o|| window.mozRequestAnimationFrame
o|| window.oRequestAnimationFrame
o|| window.msRequestAnimationFrame || function() {
o//return setTimeout(arguments[0], 1000 / 60);
oreturn -1;
o} // return -1 if unsupported
})();
window.cancelRequestAnimFrame = (function() {
oreturn window.cancelAnimationFrame
o|| window.webkitCancelRequestAnimationFrame
o|| window.mozCancelRequestAnimationFrame
o|| window.oCancelRequestAnimationFrame
o|| window.msCancelRequestAnimationFrame || function() {
oreturn -1;
o} // return -1 if unsupported
})();
当然你还要熟悉一下Canvas绘图的API。
首先你需要获取一个画布的对象，然后通过画布对象的getContext()方法获取一个绘图上下文。这个方法接受一个字符串参数"2d"，这是目前你所能用的，当然还有其他的模式，比如WebGL，虽然已经被Chrome和FireFox所支持，但是MS的IE浏览器应该是不会支持了。通过这个绘图上下文你可以画线也可以画图形，可以描边路径也可以填充它，还可以直接绘制图片，或者直接操作图片数据等等。
网上有很多这方面的资料，这里就不多说了，文章的结尾我会给出一些参考资料。如果你对Canvas绘图不是很熟悉，MDN的Canvas教程将会是你的好选择。
这里我们做一个最简单的实例，让一个圆在画布上移动起来：
-
o
- 首先我们需要把一个方框画到画布上。点击查看示例：http://jsfiddle.net/mqVZ7/1/
- 接下来让我们每秒将小方块向右向下移动5个像素，并改变它的颜色。为了方便查看我们将小方块的透明度设置为.5。你会看到一串小方块运动的轨迹：http://jsfiddle.net/mqVZ7/2/
- 这并不是我们需要的动画效果，它绘制的是一个轨迹而不是动画，要想实现动画效果，我们需要在每帧的绘制之前清除画布的所有内容，当然你还可以只重绘需要的部分。这里我们重绘整个画布，为了运动更平滑我们将移动的距离改为1个像素：http://jsfiddle.net/mqVZ7/3/
o
o
好了我们实现了我们想要的效果。当然你同样可以使用前面用过的数学公式。先说到这，后面会继续跟大家讨论控制动画对象等内容。
引用内容：
转载请注明原文出处《使用Canvas实现动画效果》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
动手开发一个HTML5赛车小游戏
你是不是曾经也有自己做一个游戏的冲动呢？是不是因为事情太多，手头没空或者没有做过游戏的基础而屡屡放弃了呢？现在HTML5正如火如荼，让我们一起使用HTML5中的新功能做一个小游戏玩玩吧。
先来看看效果：
在线演示地址：点击查看
源代码GitHub：点击查看
麻雀虽小，五脏俱全。先来说一下这个小游戏有的内容：
-
o
- 一个开始画面，写了游戏的名字和一个开始按钮。
- 游戏的主体内容，一个可以自己控制的小汽车，还有很多打酱油的汽车，另外还有马路及马路旁边的龙套树木和自行车道…
- 一个结束游戏的画面。
o
o
好了这就是全部游戏的内容。游戏的玩法很简单，相信大家应该都玩过，就是一辆汽车在马路上跑，你要尽量躲避开其他汽车，不与他们相撞，否则游戏结束，游戏会以你跑过的旅程计算分数。
主要用的技术是HTML5中的画布元素Canvas和JavaScript。主要要做的工作就是实现Canvas的tween动画，一些简单的矢量，速度，位移等效果的处理。另外还有一些Sprint动画的处理。
具体的实现过程会在以后的文章中详细讲解。
目前本人正在进一步完善这个简单的JavaScript游戏引擎，以便使用这个游戏引擎实现一个SRPG游戏。新的游戏正在开发当中，如果您对此感兴趣欢迎联系我：dukai86@gmail.com
转载请注明原文出处《动手开发一个HTML5赛车小游戏》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
基于JavaScript的微博备份应用
鉴于微博管理的日益严格，很多内容都变成了不适合公开或被用户删除。为了保存自己的微博，只好使用一些具有中国特色的应用-微博备份。
你的微博会这样么？
现在微博备份工具有两个思路：1.使用微博提供的API，但是微博提供的API目前是无法读取所有的微博消息的。2.通过wap版的微博备份。这是目前为止比较好的一个办法。
但是，作为一名前端攻城师，我们需要更加透明，更加安全的方式来备份自己的微博。
所以这里选择使用JavaScript来做一个微博备份的工具，具体请查看微博备份时光机。
其实实现的思路还是很简单的。
-
o
- 使用bookmarklet载入一段JavaScript，模拟浏览微博的过程，载入页面的全部微博。
- 分析页面上的数据，提取需要的信息并保存到数据库。
- 打开一个新的页面重复第1步和第2步操作直到最后一页。注意不要关闭第一页，因为要通过第一页监控新打开的页面的状态。
- 在全部处理完成之后将，提示保存到本地并将服务器数据删除。
o
o
o
基本的思路就是这样的。
优点：
-
o
- 使用JavaScript技术,所有过程透明,系统不需要您提供任何个人信息或密码信息,你只需要打开你要备份的微博页面,点击备份按钮即可以完成备份.
- 系统提供将备份的页面保存到本地的功能,同时提供JSON格式的元数据,方便进行管理和重用.
- 所有源代码开源
o
o
缺点：
-
o
- 备份过程较为复杂，需要本地等待。
- 需要使用较为先进的浏览器。
- 有时候可能链接失败，断点处继续的功能目前还没有。
o
o
抛砖引玉，欢迎大家指正。
转载请注明原文出处《基于JavaScript的微博备份应用》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
使用AngularJS高效便捷的开发网络应用
Google于最近发布了一款增强HTML的AngularJS框架.它可以使用增强的HTML语言快速的构建Web App.
HTML用来定义静态文档非常赞,但是用来定义web应用的动态视图就显得有点力不从心了.AngularJS能够为你的应用扩展HTML词汇,让你的代码更加具有表现力,更高的可读性,以及更高效的开发速度.
其他的框架使用抽象HTML,CSS及JavaScript的方式或者提供一个规则的方法来操作DOM来解决HTML的短板.但是所有的这些都没有解决HTML并非为动态视图设计的这一根源问题.
AngularJS是完全可扩展的并且能够与其他的框架完美结合.所有的功能都可以被修改或者代替以便适合你的独特的开发流程和功能需求.
AngularJS主要有一下特点:
-
o
- 不唐突的数据绑定.AngularJS自动的将数据从UI一道你的model中,并在数据改变后自动更新到UI.不需要继承类,不需要包装也不需要调用getter/setter方法.你的model可以简单如原始的数组也可以复杂如你自定义的JavaScript对象.
- HTML作为模板.你,你的浏览器,你的编辑器以及你的其他工具早已了解如何使用HTML工作.为什么还要使用其他的格式?AngularJS让你扩展属于你的应用的特定元素,属性,类型,而且这完全符合HTML标准.
- HTML的可重用的组件!AngularyJS让你有能力使用你添加了行为和动画的元素和属性扩展HTML语法.想像这样使用<tab>,<calendar>或者<colorpicker>来代替<div><div><div>…吗?想通过添加一个key=’ctrl-s’来给任意元素添加快捷键吗?你错过<blink>标签了么?所有的这些以及更多都不在是梦想.
- 视图和路由.AngularJS让你通过简单的路由切换子视图.同时你会得到免费的深链接.
- 测试和可测性.发布应用意味着测试他们.我们提供了常见的模拟,我们充分利用依赖注入,并且我们鼓励MVC结构分离行为和视图以便更易测试.它还提供了一个端到端的场景测试器通过了解应用状态来消除测试片段.
o
o
o
o
一个简单的例子,让你输入到input中的内容自动反映到页面其他的地方:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1-ffb27013.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
可以看到确实很简洁.至于效率方面我还没进行测试,源码也还没读,如果感兴趣可以到官网看一下,官网也有实例.
转载请注明原文出处《使用AngularJS高效便捷的开发网络应用》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
老早之前做的一个简单的logo
logo
挺早前给老高做的一个logo,虽然最后他没用,但是我自己还是很喜欢的.
Logo做的不咋样,但是青岛,鱼山的每条小路,还有每盏路灯都有我的回忆.我们却再也回不去了.
转载请注明原文出处《老早之前做的一个简单的logo》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
推荐一个图片云存储服务-又拍云存储
做了一个图片站,由于流量太大导致服务器非常卡,以至于无法访问,于是就把所有的图片转移到云存储上了.这样带来的好处是加快了图片的访问速度,减轻了服务器的负担,同时服务器的空间也不再捉襟见肘.
又拍云存储的使用接口非常简单,下载好开服包后,只要简单的几句话就可以完成图片的上传.
你可以把图片或者其他资源文件放到上面,速度真的是十分给力.我现在用了一段时间感觉很不错.
另外空间是按照大小和时间付费的,不同的大小价格不同,空间越大价格越优惠.流量是买多少用多少,没有时间限制,不存在浪费的现象.空间也可以及时调整大小,不过是大客户还是我等小用户都能找到合适自己的方案.
你的网站图片打开快了整个网站的速度也就飕飕的啦:)
下面是优惠码,可以打95折,蚊子腿也是肉,能用得上就用一下
转载请注明原文出处《推荐一个图片云存储服务-又拍云存储》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。