《从0到1:HTML5 Canvas动画开发》PPT,动态图,总结

作者根据自己多年的前后端开发经验，详尽介绍了HTML5 Canvas 动画开发技术。 

《从0到1 HTML5 Canvas动画开发》分为两大部分：第一部分介绍Canvas 基础知识，主要包括Canvas 概述、直线图形、曲线图形、线条操作、文本操作、图片操作、变形操作、像素操作、渐变与阴影、Canvas 路径、Canvas 状态及其他应用； 

第二部分介绍Canvas 进阶知识，主要包括事件操作、物理动画、边界检测、碰撞检测、用户交互、高级动画、Canvas 游戏开发、Canvas 图表库。 

此外，本书还配备了书中所有案例的源代码和PPT 教学课件，以方便学校老师教学。本书适合作为前端开发人员的参考书，也可以作为各类院校相关专业的教材及教学参考书。

目录

• 第 一部分　Canvas 基础 n
• 第　1 章 Canvas 概述　3 n
• 1．1　Canvas 是什么　3 n
• 1．1．1　Canvas 简介　3 n
• 1．1．2　Canvas 与SVG　5 n
• 1．2　Canvas 元素　5 n
• 1．2．1　Canvas 元素简介　6 n
• 1．2．2　Canvas 对象　8 n
• 第　2 章 直线图形　10 n
• 2．1　直线图形简介　10 n
• 2．2　直线　10 n
• 2．2．1　Canvas 坐标系　10 n
• 2．2．2　直线的绘制　11 n
• 2．3　矩形　16 n
• 2．3．1　描边矩形　16 n
• 2．3．2　填充矩形　18 n
• 2．3．3　rect() 方法　22 n
• 2．3．4　清空矩形　24 n
• 2．4　多边形　26 n
• 2．4．1　箭头　26 n
• 2．4．2　正多边形　27 n
• 2．4．3　五角星　30 n
• 2．5　实战题：绘制调色板　31 n
• 第3　章 曲线图形　34 n
• 3．1　曲线图形简介　34 n
• 3．2　圆形　34 n
• 3．2．1　圆形简介　34 n
• 3．2．2　描边圆　35 n
• 3．2．3　填充圆　38 n
• 3．3　弧线　39 n
• 3．3．1　arc() 方法画弧线　39 n
• 3．3．2　arcTo() 方法画弧线　43 n
• 3．4　二次贝塞尔曲线　47 n
• 3．5　三次贝塞尔曲线　50 n
• 3．6　实战题：绘制扇形　54 n
• 第4　章 线条操作　57 n
• 4．1　线条操作简介　57 n
• 4．2　lineWidth 属性　57 n
• 4．3　lineCap 属性　60 n
• 4．4　lineJoin 属性　63 n
• 4．5　setLineDash() 方法　65 n
• 第5　章 文本操作　67 n
• 5．1　文本操作简介　67 n
• 5．2　文本操作方法　67 n
• 5．2．1　strokeText() 方法　68 n
• 5．2．2　fillText() 方法　69 n
• 5．2．3　measureText() 方法　71 n
• 5．3　文本操作属性　73 n
• 5．3．1　font 属性　73 n
• 5．3．2　textAlign 属性　74 n
• 5．3．3　textBaseline 属性　76 n
• 第6　章 图片操作　78 n
• 6．1　图片操作简介　78 n
• 6．2　绘制图片　78 n
• 6．2．1　drawImage(image ， dx ， dy)　78 n
• 6．2．2　drawImage(image ， dx ， dy ， dw ， dh)　81 n
• 6．2．3　drawImage(image ， sx ， sy ， sw ，sh， n
• dx　， dy ， dw ， dh)　83 n
• 6．3　平铺图片　85 n
• 6．4　切割图片　88 n
• 6．5　深入图片操作　91 n
• 第7　章 变形操作　94 n
• 7．1　变形操作简介　94 n
• 7．2　图形平移　94 n
• 7．2．1　translate() 方法　94 n
• 7．2．2　clearRect() 方法清空Canvas　98 n
• 7．3　图形缩放　99 n
• 7．3．1　scale() 方法　99 n
• 7．3．2　scale() 方法的负作用　103 n
• 7．4　图形旋转　104 n
• 7．4．1　rotate() 方法　104 n
• 7．4．2　改变旋转中心　107 n
• 7．5　变换矩阵　108 n
• 7．5．1　transform() 方法　108 n
• 7．5．2　setTransform() 方法　113 n
• 7．6　深入变形操作　115 n
• 7．7　实战题：绘制绚丽的图形　117 n
• 7．8　实战题：绘制彩虹　118 n
• 第8　章 像素操作　120 n
• 8．1　像素操作简介　120 n
• 8．1．1　getImageData() 方法　120 n
• 8．1．2　putImageData() 方法　121 n
• 8．2　反转效果　122 n
• 8．3　黑白效果　125 n
• 8．4　亮度效果　128 n
• 8．5　复古效果　129 n
• 8．6　红色蒙版　131 n
• 8．7　透明处理　133 n
• 8．8　createImageData() 方法　134 n
• 第9　章 渐变与阴影　138 n
• 9．1　线性渐变　138 n
• 9．2　径向渐变　142 n
• 9．3　阴影　147 n
• 第　10 章 Canvas 路径　152 n
• 10．1　什么是路径？　152 n
• 10．2　beginPath() 方法和closePath() n
• 方法　152 n
• 10．2．1　beginPath() 方法　152 n
• 10．2．2　closePath() 方法　155 n
• 10．3　isPointInPath() 方法　161 n
• 第　11 章 Canvas 状态　164 n
• 11．1　什么是状态　164 n
• 11．2　clip() 方法　164 n
• 11．3　save() 方法和restore() 方法　167 n
• 11．3．1　图形或图片剪切　168 n
• 11．3．2　图形或图片变形　170 n
• 11．3．3　状态属性的改变　172 n
• 第　12 章 其他应用　175 n
• 12．1　Canvas 对象　175 n
• 12．1．1　Canvas 对象属性　175 n
• 12．1．2　Canvas 对象方法　177 n
• 12．2　globalAlpha 属性　179 n
• 12．3　globalCompositeOperation 属性　180 n
• 12．4　strokeStyle 和fillStyle　184 n
• 第二部分　Canvas 进阶 n
• 第　13 章 事件操作　191 n
• 13．1　Canvas 进阶简介　191 n
• 13．2　鼠标事件　191 n
• 13．2．1　鼠标事件简介　191 n
• 13．2．2　获取鼠标指针位置　192 n
• 13．3　键盘事件　194 n
• 从0 到1 系列图书 目录　2 n
• 13．3．1　键盘事件简介　194 n
• 13．3．2　获取物体移动方向　195 n
• 13．4　循环事件　198 n
• 第　14 章 物理动画　201 n
• 14．1　物理动画简介　201 n
• 14．2　三角函数简介　202 n
• 14．2．1　什么是三角函数　202 n
• 14．2．2　Math．atan() 与Math．atan2()　203 n
• 14．3　三角函数应用　208 n
• 14．3．1　两点间距离　208 n
• 14．3．2　圆周运动　210 n
• 14．3．3　波形运动　215 n
• 14．4　匀速运动　220 n
• 14．4．1　匀速运动简介　220 n
• 14．4．2　速度的合成和分解　221 n
• 14．5　加速运动　225 n
• 14．5．1　加速运动简介　225 n
• 14．5．2　加速度的合成和分解　228 n
• 14．6　重力　230 n
• 14．6．1　重力简介　230 n
• 14．6．2　重力应用　231 n
• 14．7　摩擦力　235 n
• 第　15 章 边界检测　238 n
• 15．1　边界检测简介　238 n
• 15．2　边界限制　239 n
• 15．3　边界环绕　241 n
• 15．4　边界生成　246 n
• 15．5　边界反弹　252 n
• 第　16 章 碰撞检测　257 n
• 16．1　碰撞检测简介　257 n
• 16．2　外接矩形判定法　257 n
• 16．3　外接圆判定法　265 n
• 16．4　多物体碰撞　269 n
• 16．4．1　排列组合　269 n
• 16．4．2　多物体碰撞　270 n
• 第　17 章 用户交互　277 n
• 17．1　用户交互简介　277 n
• 17．2　捕获物体　277 n
• 17．2．1　捕获物体简介　277 n
• 17．2．2　捕获静止物体　279 n
• 17．2．3　捕获运动物体　281 n
• 17．3　拖曳物体　285 n
• 17．4　抛掷物体　290 n
• 第　18 章 高级动画　299 n
• 18．1　高级动画简介　299 n
• 18．2　缓动动画简介　299 n
• 18．3　缓动动画应用　306 n
• 18．4　弹性动画简介　310 n
• 18．5　弹性动画应用　314 n
• 第　19 章 Canvas 游戏开发　319 n
• 19．1　Canvas 游戏开发简介　319 n
• 19．2　Box2D 简介　320 n
• 19．2．1　Box2D　320 n
• 19．2．2　Box2DWeb　320 n
• 19．3　HTML5 游戏引擎　323 n
• 第　20 章 Canvas 图表库　326 n
• 20．1　Canvas 图表库简介　326 n
• 20．2　ECharts 和HightCharts　327