《HTML5 CANVAS基础教程》读书笔记
一、HTML5简介
1.HTML5新特性
1）结构元素：section,header,hgroup,footer,nav,article,aside,
2）内容元素：figure,figcaption,mark,time
3) 表单：浏览器端验证、输入类型、输入属性
4）媒体元素：audio元素、video元素、canvas元素
2.其它和H5相关的新技术
1）CSS3
2）web fonts
3) Geolocation API
4) SVG
5) web storage
6) web workers
7) WebSocket
三、Canvas基础知识
1.常用方法：
1）fillRecct():绘制方块
2）strokeRect():绘制方块（边框）
3）绘制线条：beginPath、moveTo、lineTo、closePath、stroke
4）fill()：填充（与stroke对应）
5）arc(): 画圆
6）fillStyle()【strokeStyle()】:填充颜色
7) lineWidth:线宽
8）fillText【strokeText】:绘制文本（font属性用来设置字号和字体）
9）clearRect():清除
2.小技巧：
1）重设画布的长宽，可以清除画布上的所有内容（包括样式和颜色），据说这种效率更高哦~
2）画布全屏显示（参考P69页）
3）画布大小根据浏览器变动而变动（参考P71页）
四、canvas高级功能
1.保存和恢复绘图状态：context.save()、restore()，2个方法对状态的储存方式，是一个堆栈。
2.平移：context.translate（），平移的是坐标原点，而不是绘制对象
3.缩放：context.scale(),缩放也是对代码之后的对象起效果，而且对上面的原点坐标的平移也同样有效
4.旋转：context.rotate(),旋转是围绕着原点坐标转的，所以经常和translate方法一起使用
5.变换矩阵：transform()、setTransform,前者是在原来矩阵上应用一个相乘的效果，后者是直接设定对应的值。
6.透明：全局阿尔法值context.globalAlpha = 0.5
7.合成操作：对源和目标，两者的组合方式有多种选择（详见P87），有可能可以实现类似擦除、滤镜的效果。
8.阴影：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
9.渐变：线性渐变（createLInearGradient）、放射渐变（createRadialGradient）
10.贝赛尔曲线：二次（quadraticCurveTo）、三次(bezierCurveTo)方法
11.将画布导出为图像：toDataURL()，可以通过生成URL直接在浏览器中查看
五、处理图像和视频
1.加载方法：context.drawImage(image,x,y);
2.调整大小的用法：drawImage(image,x,y,width,height);
3.加上裁剪的用法：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh),具体用法参考P107
4.绘制的图像可以带上上一章学的各种特效：阴影、平移、变形等
5.访问像素值：context.getImageData(),计算得到像素值RGB数值的公式（P115）
6.从零绘制图像：createImageData()，putImageData(imageData,0,0)
7.利用ImageData的方法，可以实现马赛克效果、反转颜色、灰度、像素化的效果
8.处理视频：通过设置定时器和视频的帧数同步，取出视频的每一帧来应用到画布上，还可以加特效
六、制作动画
1.创建动画循环：更新对象、清除对象、绘制对象
2.使用函数来创建对象，来记忆绘制对象的形状
3.运动和改变方向，要使用三角函数、弧度的算法来实现
4.反弹是通过计算画布大小的方式实现
七、实现高级动画
1.准备工作：高中物理常识+牛顿运动定律（F = ma）
2.加速度实现：速度 += 加速度
3.摩擦力实现（模拟）：速度 *= 摩擦系数
4.检测碰撞：正方形和小球有不同的计算公式
5.动量守恒定律，使得碰撞效果更逼真（不要深究公式）
八、太空保龄球游戏
1.使用HTML元素设计UI界面（要位于画布的前面，比较方便显示），使用CSS将UI界面移动到canvas元素上方
九、躲避小行星游戏
1.使用键盘输入控制游戏
2.利用save方法来保存火箭喷射火焰效果
3.假造横向卷轴的效果
4.给游戏增加难度（不断优化游戏）
5.给游戏添加声音
十、未来的Canvas
1.canvas与SVG区别：一个是位图、一个是矢量图，SVG在编辑和绘制形状方面比较好，而canvas在编辑像素级的东西（处理图像和视频）比较好。
2.canvas与flash:选择一款像FLASH那样好用的编辑器，canvas有性能问题，还好有几种解决方法（P236）
3.三维图形：canvas使用WebGL技术来建立三维图形。三维图形对专业要求比较高，可以利用框架来降低学习门槛
4.WebSocket技术：实现多人通信、游戏
