Canvas应用小结
canvas 可以画图分为几种基本类型：
线
圆
矩形
图像
文本
颜色样式
canvas的高级的应用就是做动画和游戏,主要是应用以下几个功能：
变形(Rotate,Translate,Scaling,Transforms)
状态保存和恢复(save()restore())
裁切(clip)
动画(requestAnimationFrame,cancelAnimationFrame)
线
- moveTo(x,y)坐标点移动到x,y。
- lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线。
圆
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
矩形
- fillRect(x, y, width, height)
绘制一个填充的矩形 - strokeRect(x, y, width, height)
绘制一个矩形的边框 - clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
图像
在画布上定位图像：
drawImage(img,x,y);
drawImage(img,x,y,width,height);在画布上定位图像，并规定图像的宽度和高度
drawImage(img,sx,sy,swidth,sheight,x,y,width,height);剪切图像，并在画布上定位被剪切的部分
sx —->开始剪切的 x 坐标位置。
sy —->开始剪切的 y 坐标位置。
swidth —->被剪切图像的宽度。
sheight —->被剪切图像的高度。
文本
- fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的. strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。- textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。 - textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 - direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
颜色样式
- fillStyle = color
设置图形的填充颜色。 - strokeStyle = color
设置图形轮廓的颜色。
变形
- translate(x, y)
x 是左右偏移量，y 是上下偏移量。 - rotate(deg)
deg是角度 - scale(x, y) x是横轴缩放因子,y是纵轴
- transform(m11, m12, m21, m22, dx, dy)矩阵参数
状态保存和恢复
- save
保存当前绘画的状态，使之进入一个堆栈 - restore
从堆栈中退出一个状态，显示出来
裁切
- clip
创建一个新的裁切路径，例如:
ctx.beginPath();
ctx.arc(0,0,20,0,Math.PI*2,true);
ctx.clip();
创建一个半径为20px,原点为0,0的裁切圆。动画
requestAnimationFrame(callback)
告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。采用 window.requestAnimationFrame()实现动画效果。这个方法提供了更加平缓并更加有效的方式来执行动画，因为它只在系统准备好重绘时，才调用绘制动画帧。一般每秒钟回调函数执行60次，也有可能会被降低。
- canceltAnimationFrame(name)
name是动画名。用来中止动画。