之前看过不少HTML5动画的书，讲解的是如何去做，对于其中的数学原理讲解的不详细，常有困惑。最近看的《HTML5+JavaScript 动画基础》这个是译本，Keith Peters曾写过《Foundation ActionScript Animation》其中的数学原理被不少人转载引用，学习过AS的对这本书应该有了解。基于此，才有的这本书，HTML5版本的动画原理。哈哈，庆幸我是数学出身的~~~ 这本书上有些bug，本来做了记录，结果被当废纸扔掉了 - -！目前不能分享，只能在看的时候再记录一遍。

前段时间忙事情随笔停了，现趁春节来个年末奋斗学习！大致顺序，先理解浏览器动画原理，再熟悉canvas,再用canvas做游戏 ！

暂定目录如下，Canvas的部分我主要翻译Safari开发者Canvas Introduction ，对比而言它讲解的比较全比较偏原理吧，其它主要讲用法。

其它文献引用，我会加在尾部哦，如有遗漏请联系我哦~~~

1、JavaScript的单线程性质以及定时器的工作原理

2、requestAnimationFrame

Canvas

第一、介绍Canvas

canvas标签
针对Retina设备

第二、画线和路径

设置描边和填充样式
画矩形
路径和子路径
设置线的顶端和连接处
第三 画曲线
贝塞尔或者二次方程曲线
画弧线
认识曲线中的arcTo
---后续有个画箭头

第四 渐变和图案

线性渐变
径向渐变
图案

第五 使用预绘制图片

绘制图像
按照给定的宽高绘制图像
绘制带测绘区region mapping 的图像

第六 添加文字

字体设置
文字的方向
文字对齐
基准线
---Bounding Box Width

用Canvas做动画的更多相关文章

  1. canvas做动画

    一.绘制图片 ①加载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  3. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

  4. 让CALayer的shadowPath跟随bounds一起做动画改变-b

    在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性 ...

  5. Android使用XML做动画UI

    在Android应用程序,使用动画效果,能带给用户更好的感觉.做动画可以通过XML或Android代码.本教程中,介绍使用XML来做动画.在这里,介绍基本的动画,如淡入,淡出,旋转等. 效果: htt ...

  6. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  7. [UWP]用Shape做动画

    相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度.等待方面的动画,除此之外也会介绍一些相关技巧. 1. 使 ...

  8. [UWP]用Shape做动画(2):使用与扩展PointAnimation

    上一篇几乎都在说DoubleAnimation的应用,这篇说说PointAnimation. 1. 使用PointAnimation 使用PointAnimation可以让Shape变形,但实际上没看 ...

  9. transition和animation做动画（css动画二）

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

随机推荐

  1. CM005-逆向分析过程（上篇）

    前言 005,都说比较变态,很多人给放过去了,但是我还是决定上了它,既然变态就分两篇,上篇先实际说流程,到底应该怎么上它,下篇会告诉逆向分析的过程和方法 准备 [环境和工具] win7/xp虚拟机环境 ...

  2. PS官方正式中文版(搬砖分享)

    https://pan.baidu.com/s/1c3IdQq0 PS官方正式中文版(搬砖分享) 注意事项: 1.安装开始前请先断网,在成功破解激活前请全程断网: 2.安装完成后先试运行软件一次,然后 ...

  3. 百度Hr分享，一个合格的数据工程师简历中必备技能？

    如果你是一名数据科学方面的求职者,你肯定想知道在简历上写些什么才能获得面试的机会:如果你想进入这个领域,你一定想知道具备哪些技术才能成为一名有竞争力的求职者. 在本文中,我们对Indeed中一千份数据 ...

  4. linux第一次实验报告

    http://wwwcnblogs.com/20135228guoyao/4964477.html

  5. “数学口袋精灵”第二个Sprint计划(第五天)

    “数学口袋精灵”第二个Sprint计划----第五天进度 任务分配: 冯美欣:欢迎界面的背景音乐完善 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:代码算法设计 进度:   冯美欣:欢迎界面背景 ...

  6. 第一个sprint与第二个sprint阶段总结

    总体: 在第一个sprint中,团队里的小伙伴都在积极努力的配合,基本按照流程做了一次Sprint,大家一块进行计划会议,一块估计任务工时,但是还是有一些意外的事情,这段时间大家都没什么精力放在这门上 ...

  7. 3D舞台实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 应对Gradle联网问题、长时间卡在resolve dependencies的思路

    1.出现这种情况,在首先考虑网络问题,依赖下载不下来尝试shadowsocks,未果. 2.检查防火墙问题,更换host,无法解决. 3.新建Gradle工程,依然卡在resolve dependen ...

  9. Caffe搭建：Ubuntu14.04 + CUDA7.0 + opencv3.0 + Matlab2014A

    从Hinton在science上发表深度学习训练开创新的文章以来,深度学习火了整整有3年多,而且随着新的硬件和算法的提出,深度学习正在应用于越来越多的领域,发挥其算法的优势. 实验室并没有赶上第一波深 ...

  10. 去掉DataTable列中的重复行

    DataTable  dt = ds.Tables[0];    //获得 DataTable  DataView dv = new DataView(dt);DataTable dt2 = dv.T ...