之前看过不少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. NumCPU()在slice中的使用

    package main import ( "fmt" "runtime" ) var slice []int func main() { array := m ...

  2. PHP Lavavel 使用控制器 传递变量 以及调用 视图模板

    控制器第一次入门使用 位置: 在app/Http/Controllers 目录下创建文件名格式:例如 UserController路由调用格式:Route::get('user/tom','UserC ...

  3. 四种遍历hashMap的方法及比较

    学习怎样遍历Java hashMap及不同方法的性能. // hashMap的遍历 public void testHashMap() { Map<String, String> map ...

  4. 《Linux内核分析》课程第二周学习总结

    姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  5. 《Linux内核分析》第一周——计算机是如何工作的？

    杨舒雯 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 课程内容 1.诺曼依体系 ...

  6. 我的IT未来

    关于IT这个行业,我是持欣赏态度的,毕竟发展很快,对人们生活的改变也很大,所以,作为一个从事IT的人士,我很自豪. 读了刘先生的文章,我发现以前自己做的太少了,虽然偶尔也会吐血写程序,但还是太少了.以 ...

  7. Validform验证时可以为空，否则按照指定格式验证

    在使用Validform v5.3.2时(http://validform.rjboy.cn/) 问题:可以为空,但不为空时需要按照指定格式验证数据 查看文档: 5.2.1版本之后,datatype支 ...

  8. CodeM Qualifying Match Q2

    问题描述: 组委会正在为美团点评CodeM大赛的决赛设计新赛制. 比赛有 n 个人参加(其中 n 为2的幂),每个参赛者根据资格赛和预赛.复赛的成绩,会有不同的积分. 比赛采取锦标赛赛制,分轮次进行, ...

  9. 『编程题全队』Alpha 阶段冲刺博客Day7

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.添加了网络通信管理类 2.稍微修改了燃尽图模块ChartWidget 3.在主窗口中添加了用户信息框 4.重构了项目中的文件结 ...

  10. 解决SVN安装语言包后无法选择中文的问题（亲测可行）

    TortoiseSVN_1.8.8安装后无法选择简体中文,或者安装语言包后也无法选择中文 1.找到 SVN 安装目录,把里面的Languages文件夹删掉 2.安装语言包,百度一下也有很多安装包和语言 ...