《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技术：实现多人通信、游戏