Canvas+Api整理

初始化

canvas标签：

            
        <canvas width="宽度" height="高度" id='mycanvas'>
                <span>当前浏览器不支持canvas</span>
            </canvas>

如果不指定宽高 则 默认是 宽：300 高：150

你可以象定义一般html标签一样对canvas任意使用样式 但是不会影响绘图结果 如果不指定样式 则canvas将是默认透明的

获取canvas 2D绘图接口

            //获取canvas DOM
            var canvas = document.getElementById('canvas');
            //从canvas对象获取2D图形接口
            var context2D = canvas.getContext('2d');
        

全局参数

save()

建立一个canvas状态的还原点

restore()

回复最后一个还原点的状态

save按照入栈的方式保存状态,则每次restore将进行一次状态的出栈操作

globalAlpha

设置当前填充的全局透明度 0.0 - 1 之间

mozImageSmoothingEnabled

值为 false 时，图像不会平滑地缩放。默认是 true 。

globalCompositeOperation

表示将要绘制的图形和原有图形的叠放关系 取其中的值['source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter','darker','copy','xor']

线型

lineWidth设置当前绘线的宽度，必须是正数，默认值是1.0

线宽是指给定路径的中心到两边的粗细

lineCap线端的显示样式(butt, round, square)

butt是默认值，表示无样式 round表示圆形端点 square表示方形端点

lineJoin定义两条线段连接处的样式(round,bevel,miter（默认）)

round圆角连接 bevel平角连接 miter延伸连接(受到miterLine属性的制约)

样式 颜色 渐变

fillStyle

设置填充色

strokeStyle

设置轮廓色

            //以下是允许的颜色描述方式 下面每种方式都声明了橘黄色
            ctx.fillStyle = "orange";
            ctx.fillStyle = "#FFA500";
            ctx.fillStyle = "rgb(255,165,0)";
            ctx.fillStyle = "rgba(255,165,0,1)";
        

createLinearGradient(x1,y1,x2,y2)

建立一个线性渐变，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x1,y1,r1,x2,y2,r2)

建立一个圆形渐变，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

addColorStop(position, color)

对于建立的渐变对象可以调用的添加颜色的方法.position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

createPattern(image,type)

该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。

路径相关

beginPath()

创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用 beginPath，子路径组都会被重置，然后可以绘制新的图形。

cosePath()

直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的

moveTo(x,y)

设置开始坐标为x,y

lineTo(x,y)

相对开始坐标开始至x,y坐标定义直线

arc(x, y, radius, startAngle, endAngle, anticlockwise)

方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。

quadraticCurveTo(cp1x, cp1y, x, y)

2次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

3次贝塞尔曲线

stroke()

根据前面的定义绘制路径

fill()

填充当前路径定义的区域

注意：当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath 。

绘制

strokeRect(x,y,width,height)

绘制指定的矩形线框

fillRect(x, y, width, height);

在指定坐标填充指定高宽的矩形区域

clearRect(x,y,width,height)

清楚指定的矩形区域

填充

图片处理

drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标, width height是绘制的图片的宽度高度。 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

变形

translate(x, y)

移动原点到指定位置，默认的原点是0,0

rotate(angle)

使用整个画布饶原点旋转指定的弧度

scale(x, y)

x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有

transform(m11, m12, m21, m22, dx, dy)

这个方法必须将当前的变形矩阵乘上下面的矩阵：

m11	m21	dx
m12	m22	dy
0	0	1

setTransform(m11, m12, m21, m22, dx, dy)

这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。