之前看过不少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. Jenkins Maven安装设置

    Jenkins Maven安装设置 如果没有学习过 Maven 的朋友,可以先了解 Maven教程,然后再进一步学习本教程文章. 第1步:下载和设置Maven Maven的官方网站就是Apache M ...

  2. 3. Python3 基本数据类型

    Python3 基本数据类型 Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型& ...

  3. PAT甲题题解-1021. Deepest Root (25)-dfs+并查集

    dfs求最大层数并查集求连通个数 #include <iostream> #include <cstdio> #include <algorithm> #inclu ...

  4. PAT甲题题解-1039. Course List for Student (25)-建立映射+vector

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

  5. uc浏览器app点评

    uc浏览器app我经常用,是我接触的第一款手机浏览器,感觉还不错的,uc浏览器新闻更新速度有点慢,有时候还闪退,以前在搜索栏粘贴文字后,如果想改后面的文字,根本就不行,用uc浏览器下东西速度比较慢,现 ...

  6. 《Linux内核分析》第一周学习报告

    第一周:计算机是如何工作的 姓名:王玮怡  学号:20135116 第一节 存储程序计算机工作模型(冯诺依曼体系结构) IP指向的内存地址,取指令执行,完成后,IP值自加一,取下一条指令再执行. AP ...

  7. simhash-- 一种文档去重的算法

    最早看数学之美的时候,书中就提到了这个算法,当时没有做过相关地工作,没什么具体的印象.一年前转岗时面试时别人提到了这个算法,知道了simhash可以用来解决网页等海量数据的去重问题,很高效. 然后自己 ...

  8. 2017-2018 第一学期201623班《程序设计与数据结构》-第7&8周作业问题总结

    一.作业内容 第7周作业 http://www.cnblogs.com/rocedu/p/7484252.html#WEEK07 第8周作业 http://www.cnblogs.com/rocedu ...

  9. 团队作业4--第一次项目冲刺（Alpha版本）日志集合处

    第一次 http://www.cnblogs.com/p-12/p/7861231.html 第二次 http://www.cnblogs.com/p-12/p/7861835.html 第三次 ht ...

  10. Mybatis：Eclipse引入dtd约束文件使得xml文件有提示

    https://blog.csdn.net/lsx2017/article/details/82558135