之前看过不少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. Nginx安装负载均衡配置 fair check扩展

    前言 本文主要是针对Nginx安装.负载均衡配置,以及fair智能选举.check后端节点检查扩展功能如何扩展,进行讲解说明. fair模块: upstream-fair,“公平的”Nginx 负载均 ...

  2. 177. Convert Sorted Array to Binary Search Tree With Minimal Height【LintCode by java】

    Description Given a sorted (increasing order) array, Convert it to create a binary tree with minimal ...

  3. 基于spring框架的apache shiro简单集成

    关于项目的安全保护,我一直想找一个简单配置就能达到目的的方法,自从接触了shiro,这个目标总算达成了,以下结合我使用shiro的经验,谈谈比较轻便地集成该功能. 首先我们先了解一下shiro是什么. ...

  4. Android Studio发布Release版本之坑--Unknown host 'd29vzk4ow07wi7.cloudfront.net'

    使用Android Studio发布Release版本时,出现Unknown host 'd29vzk4ow07wi7.cloudfront.net'...错误. 解决方法:修改本机的DNS为8.8. ...

  5. PAT甲题题解-1022. Digital Library (30)-map映射+vector

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789235.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  6. 12.22daily_scrum

    今天是我们小组M2阶段开始一周结束,各项工作进入一个阶段性的总结过程,悬浮窗的设计也已经告一段落进入调试的阶段,新的工作任务有了添加,即滑锁密码的加入,更好地加深了用户体验性,软件的可用性也进一步加强 ...

  7. UIO,大页内存,CPU亲和性,NUMA机制等

    Linux环境下的UIO(Userspace I/O) UIO 用户空间下驱动程序的支持机制.DPDK使用UIO机制使网卡驱动程序运行在用户态,并采用轮询和零拷贝方式从网卡收取报文,提高收发报文的性能 ...

  8. RYU 灭龙战 first day

    RYU 灭龙战 first day 前言 由于RYU翻译过来是龙的意思,此次主题就叫灭龙战吧 灵感来源 恶龙的三位真火-问题所在 参照了官方文档的基本操作 笔者以此执行 一个终端里 sudo mn - ...

  9. DirectoryEntry_Properties属性的遍历(win2003)

    DirectoryEntry root = new DirectoryEntry(@"IIS://localhost/W3SVC"); string PInfo = "& ...

  10. 【Leetcode】209. Minimum Size Subarray Sum

    Question: Given an array of n positive integers and a positive integer s, find the minimal length of ...