Canvas基础

1. 通过.getContext('2d')获取绘图环境。

2. 绘制方法
1）.fillRect(L,T,W,H)：默认颜色是黑色
2）.strokeRect(L,T,W,H)：带边框的方块 （默认1像素黑色边框，但显示出来是2像素，注意显示出来的不一样的原因，解决：定位时加0.5像素 - OGC.strokeRect(50.5,50.5,100,100)）
PS：绘制一个填充的带边框的方块，应先写fillRect的代码，再写strokeRect

3. 设置绘图样式
1）.fillStyle = '颜色值'：填充颜色（绘制canvas是有顺序的）
2）.lineWidth = 数字：线宽度，是一个数值
3）.strokeStyle = '颜色值'：边框颜色

4. 边界绘制
1）.lineJoin = '样式参数'：边界连接点样式（miter（默认）、round（圆角）、bevel（斜角））
2）.lineCap = '样式参数'：端点样式（butt（默认）、round（圆角）、square（高度多出为宽一半的值））

5. 绘制路径
1）.beginPath()：开始绘制路径
2）.closePath()：结束绘制路径
3）.moveTo(x,y)：移动到绘制的新目标点
4）.lineTo(x,y)：新的目标点
5）.stroke()：画线，默认黑色
6）.fill()：填充，默认黑色
7）.rect(L,T,W,H)：矩形区域
8）.clearRect(L,T,W,H)：删除一个画布的矩形区域
9）.save()：保存路径，和restore()是一起用的
10）.restore()：恢复路径
- 和save()是一起用的，例如两个三角形，一个要填充红色，另一个不需要

OGC.save();
OGC.fillStyle='red';
OGC.fillRect(xxxx);
OGC.restore();

OGC.fillRect(xxx);

6. 绘制圆

.arc(x,y,半径,起始弧度,结束弧度,旋转方向)
1）x, y：起始位置
2）弧度与角度的关系：弧度 = 角度*Math.PI/180
3）旋转方向：顺时针（默认：false）、逆时针（true）

7. 绘制其他曲线
1）.arcTo(x1, y1, x2, y2, r)
- 第一组坐标、第二组坐标、半径
2）.quadratiCurveTo(dx, dy, x1, y1)
- 贝塞尔曲线：第一组控制点、第二组结束坐标
3）.bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1)
- 贝塞尔曲线：第一组控制点、第二组控制点、第二组结束坐标

8. 变换
1）.translate(x, y)
- 偏移：从起始点为基准点，移动当前坐标位置
2）.rotate
- 旋转：参数为弧度
- 例子：旋转的小方块
3）.scale
-缩放例子：旋转加缩放的小方块

9. 插入图片
1）等图片加载完，再执行canvas操作
- 图片预加载：在onload中调用方法
2）.drawImage(oImg, x, x, w, h)
- oImg：当前图片 x,y：坐标 w,h：宽高

10. 设置背景
.createPattern(oImg,平铺方式)
平铺方式：repeat、repeat-x、repeat-y、no-repeat

11. 渐变
1）.createLinearGradient(x1,y1,x2,y2)
- 线性渐变；
- 第一组参数：起始坐标；第二组参数：结束点坐标
- addColorStop(位置，颜色) 添加渐变点。0 -- 代表起始位置；1 -- 代表结束位置；中间还可以设置无限个0-1的数值位置的颜色；
2）.createRadialGradient(x1,y1,r1x2,y2,r2)
- 放射性渐变；
- 参数：第一个圆的坐标和半径，第二个圆的坐标和半径

12. 文本
1）.strokeText(文字,x,y)
- 文字边框
2）.fillText(文字,x,y)
- 文字填充
3）.font = ''
- 文字大小：'60px impact',impact是一种字体，一定要有字体的参数，否则调不了大小，canvas能识别的字体也很少
4）.textAlign=''
- 默认是start跟left一样的效果 end right center
5）.textBaseline=''
- 文字上下的位置的方式默认：alphabetic，还有top middle bottom
6）.measureText()
- measureText(str).width：只有宽度，没有高度
- 例子：文字居中

13. 阴影
1）.shadowOffsetX=值、shadowOffsetY=值
- x轴偏移、y轴偏移
2）.shadowBlur=值
-高斯模糊值
3）.shadowColor = ''
- 阴影颜色，默认是黑色透明

14. 像素
1）.getImageData(x,y,w,h)
- 获取图像数据
2）.putImageData(获取图像,x,y)
- 设置新的图像数据
3）属性
- width：一行的像素个数
- height：一列的像素个数
- data：一个数组，包含每个像素的rgba四个值，注意每个值都在0-255之间的整数
4）.createImageData(w,h)
- 生成新的像素矩阵，初始值是全透明的黑色
- 例子：像素显字
5）获取和设置指定坐标
- 封装函数：getXY()、setXY()
6）图片的像素操作
- 必须是同源下
- 例子：反色、倒影、渐变
- 例子：马赛克效果

15. 合成
1）全局阿尔法值
- globalAlpha = 值
2）覆盖合成
- 源 source：新的图形
- 目标 destination：已经绘制过的图形
- globalCompositeOperation = '属性', 有以下属性：
>>source-over destination-over souce-atop destination-atop
>>source-in destination-in source-out destination-out lighter copy xor

16. 将画布导出为图像
.toDataURL
- 火狐右键可以直接导出成图片

17. 事件操作
.isPointInPath

PS：iCanvaScript(canvas中的jquery)： http://jcscript.com/

转载于:https://my.oschina.net/nancywong/blog/349549