canvas绘图基础

1.创建2d上下文对象

   Canvas.getContext(‘2d’);

   填充：

   fillStyle： color

           gradient:linearGradient(线性渐变)/radialGradient（径向渐变）

           image

           canvas

           video

  描边： strokeStyle: color …

2.绘制一条线

线条末端形状:

lineCap: butt(方头)、round(圆头)、square(方头)

线条相交的属性:

lineJoin: round(圆交) 、bevel/miter（斜接）

3.绘制矩形

rect(x , y , width , height);//绘制路径

strokeRect();//绘制描边矩形

fillRect();//绘制填充矩形

clearRect();//清除画布上的矩形区域

4.变换

save() //保存设置

restore() //回复状态

translate(x,y)//移动坐标原点

rotate(deg)//围绕原点旋转图像deg弧度

scale(sx,sy) //缩放 默认 sx,sy 为1

transform(a,b,c,d,e,f)//直接修改变换矩阵

setTransform(a,b,c,d,e,f) //将变换矩阵重置为默认状态

a   c   e

b   d   f

0   0   1

a : 水平缩放

b : 水平倾斜

c：垂直倾斜

d：垂直缩放

e : 水平位移

f : 垂直位移

5.渐变

//线性渐变

var gradient=context.createLinearGradient(startX,startY,stopX,stopY);

//径向渐变

var gradient=createRadialGradient(x0,y0,r0,x1,y1,r1);

参数：起点坐标和终点坐标

 gradient.addColorStop(0,'#000');

gradient.addColorStop(1,'#035');

参数：色标位置，css颜色值

context.fillStyle=gradient;

context.fillRect(0,0,canvas.width,canvas.height);

6.模式

使用图片、video、画布 作为填充背景

fillStyle = context.createPattern(img/video/canvas,'repeat-style')

repeat-style : no-repeat;

             repeat-x/repeat-y

             repeat

7.绘制圆弧和曲线

   圆弧:

 贝塞尔曲线：

三个演示地址 ：

http://www.j--d.com/bezier

http://tinyurl.com/html5quadratic

http://tinyurl.com/html5bezier

8.绘制文本

 context.font : 文字样式、大小、字体

 context.fillText(string, x ,y)

 context.strokeText(string, x ,y)

  文本对齐：

  水平：textAlign: start 、end、center

  垂直：top、middle、bottom

文本的度量值：

context.measureText(string).width; 

9.阴影、合成

阴影：

context.shadowColor = "";//阴影部分的颜色

context.shadowOffsetX = 20;//可填负数，相反方向

context.shadowOffsetY = 20;//可填负数，相反方向

context.shadowBlur = 5;//阴影的模型程度，值越大越模糊

合成：

context.globalAlpha = 0.6 //全局透明度

context.globalCompositeOperation = "source-over";//图形与图形间遮挡后所产生的效果（11种）

剪辑区域

context.clip();

检测某点是否在路径内的函数

context.isPointInPath(x,y);

非零环绕原则

10.扩展canvas的context ,自定义函数

CanvasRenderingContext2D.prototype.方法名=fn