之前看过不少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. 「功能笔记」Spacemacs+Evil备忘录

    设置代理 (setq url-gateway-method 'socks) (setq socks-server '("Default server" "127.0.0. ...

  2. 从浏览器输入URL到显示页面到底发生了什么？

    首先说明一下,当系统本地缓存了你所请求的资源时,会直接把缓存内容解析并显示,而不会进行以下的一系列行为. 一.DNS域名解析 至今的计算机数量可谓是数不胜数,而它们的唯一识别身份就是ip地址.我们常说 ...

  3. Catlike学习笔记(1.3)-使用Unity画更复杂的3D函数图像

    第三篇来了-今天去参加了 Unite 2018 Berlin,感觉就是....非常困...回来以后稍微睡了下清醒了觉得是时候认真学习下了,不过讲的很多东西都是还没有发布或者只有 Preview 的版本 ...

  4. 原生和jquery 的 ajax

    form数据的序列化: $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:n ...

  5. Linux内核分析作业 NO.5

    拔掉系统调用的三层皮(下) 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-100002900 ...

  6. Linux内核分析作业第三周

    一.实验楼实验 使用实验楼的虚拟机打开shell 1 cd LinuxKernel/ 2 qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd ...

  7. Alpha版使用说明

    1引言 1 .1编写目的 针对我们发布的alpha版本做出安装和使用说明,使参与内测的人员及用户了解软件的使用方法和相关内容. 1 .2参考资料 <javaWeb程序设计基础><di ...

  8. PAT----1001. A+B Format (20)解题过程

    1001. A+B Format (20) github链接 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B Calculate a + b and output t ...

  9. d3 数学方法（伪随机数生成器 ）

    一.正态(高斯)分布(normal (Gaussian) distribution)的随机数 /* var nomarlRandmo = d3.random.normal(); console.log ...

  10. join()方法跟踪

    #join方法跟踪java.lang.Thread.join() 进入线程的join方法,实际上线程thread是实现的 runnable接口 class Thread implements Runn ...