canvas

HTML

一、canvas元素的基础知识

canvas元素提供一块无色透明的区域，利用JavaScript编写脚本进行绘画。

1.在页面放置canvas元素
需要指定id、width、height三个属性属性，若不设置宽高属性则默认宽300像素，高150像素。

<canvas id="draw" width="600px" height="400px"></canvas>

2.绘制矩形
步骤：
1）取得canvas元素：用document.getElementById方法取得canvas对象，需要这个对象提供相关方法

2）取得上下文对象：图形上下文也是一个封装了很多绘图功能的对象，需用canvas对象的getContext方法获取上下文对象，一般为2D渲染上下文。

3）设定绘图样式：绘图的样式主要是针对图形的颜色，但并不限于图形的颜色。设定填充图形的样式：fillStyle;设定图形边框的样式：strokeStyle;

4）指定线宽：使用图形上下文对象的lineWidth属性设置图形边框的宽度

5）绘制图形：分别使用fillRect与strokeRect方法来填充矩形和绘制矩形边框：context.fillRect(x,y,width,height)。x指矩形的X坐标，y指矩形的Y坐标，width指矩形的宽度，height指矩形的高度。
context.strokeRect(x,y,width,height)。

//获取canvas元素和上下文元素
var canvas = document.getElementById("draw");
var context = canvas.getContext("2d");
//设定填充、边框样式
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
//利用相关方法绘图
context.fillRect(50,50,100,100);//先确定矩形路径，然后绘制
context.strokeRect(50,50,100,100);

3.绘制圆形路径
步骤：也是先获取对象元素，然后创建路径，再按照上面的方法进行绘制
1）开始创建路径:context.beginPath(),不需要参数
2）创建圆形路径：需要使用上下文对象的arc方法：

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

x,y指绘制圆形的起点横、纵坐标；radius为圆形半径；startAngle、endAngle指开始与结束的角度；anticlockwise为true时指逆时针绘制。
3）结束创建路径：context.closePath();
...同上

//获取canvas对象和context对象
var canvas = document.getElementById("draw");
var context = canvas.getContext("2d");

//创建路径
context.beginPath();
context.arc(300,300,40,0,Math.PI*2,true);
context.closePath();

//设定填充、边框样式
context.fillStyle = "red";
context.strokeStyle = "blue";

//利用相关方法绘图
context.fill();//只进行绘制，因为路径已经创建完毕了
context.stroke();

4.绘制直线路径
1）moveTo方法是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点：moveTo(x,y)。
2）lineTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点之间绘制一条直线：lineTo(x,y)。

//路径绘制
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.closePath();

5.绘制文本
fillText和strokeText方法接收三个参数，第一个是要绘制的文本，第二个和第三个是文本原点（左下角）的坐标值。

var text = "Hello World";
context.font = "italic 60px serif";
context.fillText(text,40,100);
context.strokeText(text,40,100);

6.擦除canvas
1）调用上下文对象context的clearRect方法即可擦除。context.clearRect(0,0,canvasWidth,canvasHeight)可以清除canvas中所有的图像，其中canvasWidth是canvas的宽度，canvasHeight是canvas的高度。（通过指定这四个参数来擦除某个区域的图像）
2）给canvas元素重新设定宽高属性，会重置canvas上所有的内容，包括样式和颜色。

canvas.attr('height',canvas.height());
canvas.attr('width',canvas.width());

二、canvas高级

1.保存和恢复绘图状态

1）画布绘图状态：描述某一时刻2D渲染上下文外观的整套属性，从简单的颜色值到复杂的变换矩阵及其他特性。但画布上的当前路径和当前位图并不属于状态。

2）保存绘图状态：

var canvas = document.getElementById('#myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "red";
context.save();

调用上下文的save方法，将绘图状态保存到一个栈中

3）恢复绘图状态：

context.fillStyle = "blue";
context.restore();

调用上下文的restore方法，能够自动取出最后添加到栈中的绘图状态，覆盖现有全部样式。需要注意的是，调用restore方法是，先取栈的顶部第一个状态，并将该状态删除，再次调用则取栈的第二个状态。

2.变形

1）平移：将2D渲染上下文的原点移动，而不是移动某个具体的图形，因此后面的原点坐标也会变化，而不再是（0,0）

context.translate(x,y)

2）缩放：将2D上下文的x和y方向都乘以2.

context.scale(2,2)

3）旋转：将2D上下文绕其原点（0,0）进行旋转

context.rotate(Math.PI/4)//以弧度为单位

4）变换矩阵：a、d表示x轴和y轴缩放的倍数，c、b表示x轴和y轴倾斜角度，e、f表示x轴和y轴平移的数值。transform变换是基于前一次transform变换的，所以需要重置方法setTransform。

context.transform(a,b,c,d,e,f)
context.setTransform(1,0,0,1,0,0)//重置变换矩阵

3.合成

1）全局alpha值：所有图形的透明度

context.globalAlpha = 0.5//所有图形的透明度都将变成0.5

2）合成操作：用globalCompositeOperation属性表示源（新绘制的图形）与目标（已有图形的2D上下文）之间的合成关系

context.globalCompositeOperation = 'source-over'//源覆盖目标
context.globalCompositeOperation = 'destination-over'//目标覆盖源
context.globalCompositeOperation = 'source-atop'//源绘制在目标上
context.globalCompositeOperation = 'destination-atop'//目标绘制在源上
context.globalCompositeOperation = 'source-in'//重叠区域保留源
context.globalCompositeOperation = 'destination-in'//重叠区域保留目标
context.globalCompositeOperation = 'source-out'//不重叠的区域绘制源
context.globalCompositeOperation = 'destination-out'//不重叠的区域保留目标
context.globalCompositeOperation = 'lighter'//重叠区域颜色叠加
context.globalCompositeOperation = 'copy'//源覆盖掉目标
context.globalCompositeOperation = 'xor'//异或，绘制不重叠的区域

4.阴影
调用2D上下文的四个属性进行绘制，与CSS3中box-shadow属性类似

context.shadowOffsetX = 5px;//阴影的偏移量
context.shadowOffsetY = 5px;
context.shadowBlur = 20;//阴影的模糊半径
context.shadowColor = rgb(0,0,0)//阴影的颜色

5.渐变

1）线性渐变：调用上下文对象的createLinearGradient方法，返回一个CanvasGradient对象，然后调用方法，设置渐变的颜色。

var gradient = context.createLinearGradient(x1,y1,x2,y2);//起点、终点坐标
gradient.addColorStop(0,"red");//起点颜色，0表示起点
gradient.addColorStop(1,"black");//终点颜色
context.fillStyle = gradient;

2）径向渐变：调用上下文对象的createRadialGradient方法，需要六个参数，前三个参数表示开始圆，后三个参数表示结束圆。

var gradient = context.createRadialGradient(0,0,100,200,200,400);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"black");
context.fillStyle = gradient;

6.导出为图像

1）直接右键，另存为

2）调用canvas的toDataURL()方法，将canvas画布绘图转换为一个数据URL

var dataURL = canvas.toDataURL();
var oImg = document.creatElement('img');
oImgsrc = dataURL;