吹过的风 - 博客园

2015年1月27日

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.渐变填充渐变填充有线性渐变，和径向渐变两种。因为是用法，我们直接在代码中分析会更直观一. Gradient F... 阅读全文

posted @ 2015-01-27 11:31 吹过的风阅读(225) 评论(0) 推荐(1) 编辑

2015年1月26日

动画原理——曲线

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.使用quadraticCurveTo，开始点：moveTo(20,20)控制点：quadraticCurveTo(20,100,... 阅读全文

posted @ 2015-01-26 17:17 吹过的风阅读(936) 评论(0) 推荐(0) 编辑

2015年1月23日

动画原理——绘画API

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.canvas的contextvar canvas = document.getElementById('canvas'), co... 阅读全文

posted @ 2015-01-23 15:39 吹过的风阅读(314) 评论(0) 推荐(0) 编辑

动画原理——颜色值处理

摘要： 1.使用十六进制的颜色有时候所提供颜色值的格式并不是你需要的，这时就需要进行转化。//转为16进制颜色属性var hexColor = '#' + (16733683).toString(16);console.log(hexColor);//转为10进制数字var color = window.p... 阅读全文

posted @ 2015-01-23 14:53 吹过的风阅读(348) 评论(0) 推荐(0) 编辑

动画原理——两点间的距离，点到鼠标的距离

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.要求两点间的距离，只需要在直线上构建一个直角三角形，然后用勾股定理。如下图：2.代码如下10-distance.html ... 阅读全文

posted @ 2015-01-23 13:21 吹过的风阅读(228) 评论(0) 推荐(0) 编辑

动画原理——绘制正弦函数&环绕运动&椭圆运动

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.正弦函数。x位置递增，y位置用sin生成。这段代码是不需要ball.js的。代码如下： Wave 2 ... 阅读全文

posted @ 2015-01-23 10:56 吹过的风阅读(910) 评论(0) 推荐(0) 编辑

动画原理——脉动（膨胀缩小）&&无规则运动

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.脉动是一种半径r来回反复的运动，在canvas中他是对原图形的方法和缩小。可以将sin应用在控制大小的属性scaleX，scal... 阅读全文

posted @ 2015-01-23 09:47 吹过的风阅读(540) 评论(0) 推荐(0) 编辑

2015年1月22日

动画原理——线性来回运动&&波动

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.在正选函数中，随角度的增大，sin的值徘徊在正一和负一之间。如下图。这可以用做物体的来回运动。2.动画源码index.html ... 阅读全文

posted @ 2015-01-22 17:06 吹过的风阅读(453) 评论(0) 推荐(0) 编辑

动画原理——指针随鼠标旋转动画

摘要：书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation1.window.requestAnimationFrame一般显示器的刷新频率为16.7ms,简单的使用setTimeout(fn... 阅读全文

posted @ 2015-01-22 16:04 吹过的风阅读(419) 评论(0) 推荐(0) 编辑

2015年1月9日

Sizzle一步步实现所有功能（基本筛选）

摘要：第二步：实现:first,:last,:eq(),even,odd,:gt(),:lt(); :header,:root,:taget; :not()。;(function( window ){var arr = [];var push = arr.push;var slice = arr.slic... 阅读全文

posted @ 2015-01-09 11:26 吹过的风阅读(424) 评论(0) 推荐(0) 编辑