1. review
obj.hasOwnProperty(name) 判断属性name是否obj对象的自身属性
for...in 遍历对象/数组
o1 instanceof Object 判断实例对象o1是否为Object所创建的实例
jquery 仿写
2. canvas 画布，新标签，IE9以下不支持 ，命令式编程
svg 矢量 ，声明式编程[html/css]
默认宽高 300 * 150，不要在样式里设置宽高，在canvas元素属性里设置
提供了一套javascript绘制图形的接口，让浏览器原生支持绘图
绘制的是位图/栅格图像
a.绘制图形【点线面...】
b.处理图像【图片、视频处理】
c.动画/游戏
3. canvas坐标系，默认左上角为原点，向右为x轴正方向，向下为y轴正方向
4. 矩形，只提供了三个直接绘制图形的方法
ctx.fillRect(x, y, w, h); 填充 绘制以点(x,y)为左上角，宽为w，高为h的矩形
ctx.strokeRect(x, y, w, h) 描边
ctx.clearRect(x, y, w, h) 擦除
其他图形的绘制都必须经过以下四个步骤：
a.开始一个路径 ctx.beginPath()
b.使用绘图命令
c.结束闭合路径 ctx.closePath()
d.填充/描边
5. 绘制1px线，canvas是栅格化图像，至少占据一个格子，绘制线的起点+0.5即可
6. ctx.fillStyle 填充样式
ctx.strokeStyle 描边样式
7. 绘图路径path命令
ctx.arc(x, y, radius, beginAngle, endAngle, clockwise)
beginAngle 开始的弧度
endAngle 结束的弧度
clockwise 是否逆时针方向
ctx.lineTo(x,y)
ctx.moveTo(x,y)
8. 文本居中
第一种方式
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillRect("html5", canvas.width/2, canvas.height/2)
第二种方式
var text = "I'm learning canvas";
var tm = ctx.measureText(text);
ctx.textBaseline = "middle";
ctx.fillText(text, (canvas.width - tm.width)/2 , canvas.height/2)
///////////////////////////////////////////第二天
1.canvas动画
requestAnimationFrame,为动画设计的接口,相比计时器制作的要流畅,占用资源少
var id = requestAnimationFrame(fn)
cancelAnimationFrame(id)
2.canvas动画跟DOM动画比较
canvas性能好,绘制之前要先擦除画布
DOM动画比较消耗性能,也不够流畅
3.擦除画布的方法
ctx.clearRect(0,0,canvas.width,canvas.height)
canvas元素的宽度变化会擦除画布所有内容
canvas.width = canvas.width
canvas.height = canvas.height
4. e.offsetX/e.offsetY 相对绑定元素的坐标
e.clientX/e.clientY 是相对于canvas画布的
刮刮乐效果,原理擦除鼠标在canvas中的坐标中的内容
a.添加事件touchmove/mousemove
b.找到鼠标相对canvas的zuob
c.ctx.clearRect(x,y,10,10)
5. ctx.isPointInPath(x,y) 判断点(x,y)是否在路径里,返回布尔值
以下三个方法不会产生路径
ctx.fillRect();
ctx.strokeRect();
ctx.closeRect();
