Canvas
功能
在网页中实时生成图像，并操作图像内容（通俗就是在网页中画画）
- canvas画布可以制作在线绘图工具,
- canvas画布可以制作动态数据图纸.常用于网站后台的数据统计功能.
- canvas画布可以用于制作HTML5游戏
- canvas画布可以制作app应用.....
格式
注意:
1.IE9+浏览器支持
2.默认300宽度，150高度
3.不要使用css给canvas设置宽度和高度－导致绘制的图形被缩放
使用:
1.获取Canvas对象（即画布）
var obj = document.querySelector('canvas');
obj.width:画布宽度
obj.height:画布高度
2.获取绘图环境:所有的绘图都以此为基础
var ctx = obj.getContext('2d');
Canvas绘图图形
直线
方法:
moveTo(x,y):将鼠标移动到指定的点
lineTo(x,y):将画笔移动到指定x,y点，形成一条直线
stroke():将点绘制成直线
属性:
lineWidth:直线的厚度
strokeStyle:直线(边框)的颜色
lineCap:直线头尾的样式（不占据原来直线的长度）
butt:默认
round:圆形
square:方形（多出宽度一半的值）
lineJoin:两条直线的夹角的样式
miter:默认尖角
round:圆形
bevel:斜角
虚线
moveTo(100,100)
lineTo(400,100)
setLineDash([5,10]) 5:线段的长度 10:线段的间距
setLineDash([5,10,15]) 复制一份数组元素，循环绘制
setLineDash([5,10,15,20]) 奇数线段长度，偶数线段间距
矩形
属性:
fillStyle : 填充颜色
strokeStyle : 矩形边框颜色
方法:
fillRect(x，y，w，h) : 绘制矩形框并填充颜色
strokeRect(x，y，w，h) : 绘制矩形框设置边框的颜色
clearRect(x，y，w，h) : 清空指定矩形内容
圆弧(圆形)
arc(x，y，radius，start，end，逆true|顺false) : 绘制圆
x,y:圆心横坐标
radisu:圆半径
start:开始弧度
end:结束弧度
逆|顺:顺时针绘制|逆时针绘制
canvas很多都是利用弧度进行计算的
角度和弧度计算公式：弧度 = 角度*Math.PI/180
全圆：2PI(360)
半圆：PI(180)
1/4圆：PI/2(90)
曲线
moveTo(移动到指定位置的横坐标，指定位置的纵坐标)
arcTo(第一组控制点的横坐标，纵坐标，第二组控制点的横坐标，纵坐标，圆弧的半径)
二次贝塞尔曲线
quadraticCurveTo(第一组控制点横坐标，第一组控制点纵坐标，第二组控制点横坐标，第二组控制点纵坐标)
context.moveTo(100,200);
context.quadraticCurveTo(200,100,400,300);
三次贝塞尔曲线
bezierCurveTo(第一组控制点横坐标，纵坐标，第二组控制点横坐标，纵坐标，第三组控制点横坐标，纵坐标):三组控制点来掌控曲线方向
context.moveTo(100,200);
context.bezierCurveTo(150,150,300,300,400,100);
文本
方法
fillText(text, x, y, [maxWidth]):填充方式绘制文本
strokeText(text, x, y, [maxWidth]):绘制文字边框颜色
文本属性
font属性：跟CSS一样
textAlign属性：设置文字水平对齐方式
start(默认) end left right center
textBaseline属性：文本垂直方式
top hanging middle alphabetic(默认) ideographic bottom
悬挂 字母排序 思想的
measureText():获取文本的宽度
Canvas全局方法
beginPath()：开启路径
closePath()：关闭路径
Canvas坐标系统：默认坐标原点是元素的左上角位置（0，0）
translate()：平移(横坐标，纵坐标)
注意：将坐标原点移动到指定位置
scale(水平缩放倍数，垂直缩放倍数):缩放
rotate(弧度):旋转的弧度
注意：如果要旋转，默认是以坐标原点旋转的，所以如果要旋转，必须确认坐标原点在哪里
save()：保存之前的状态
restore():恢复保存之前的样式
将这两个方法之间的代码独立，里面的样式设置不会带外面的绘制产生影响
剪辑区域
clip() 用于设定剪辑的区域
注意：使用clip进行了路径剪辑之后所有操作只能在剪辑区域之内进行操作。
使用剪辑区域一般都会在save和restore之间进行操作。
toDataURL():返回当前canvas图像的URLdata信息
Canvas全局属性
属性：
globalAlpha:设置全局的透明度
globalCompositeOperation：图片合成：
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
线性渐变：指定区间的颜色过渡
var color = context.createLinearGradient(起始点横坐标，起始点纵坐标，宽度，高度)
color.addColorStop(偏移值，颜色)
径向渐变(两个圆心的连线进行颜色过渡，两个圆的切线的焦点处进行颜色的扩散)
var color = context.createRadialGradient(开始圆心横坐标，圆心纵坐标，半径，结束圆圆心横坐标，结束圆圆心纵坐标，结束圆的半径);
color.addColorStop(偏移值，颜色)
阴影
阴影颜色
context.shadowColor = 'red';
阴影偏移值
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
设置模糊值
context.shadowBlur = 4;
图片对象
将图片绘制到canvas画布中
drawImage(obj,起始横坐标，纵坐标，[固定宽度]，[固定高度]);
创建图片并设置图片是否重复
var bg = createPattern(obj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向内重复指定的元素
ctx.fillStyle = bg;
像素操作
// 获取canvas画布 指定区间位置 的 像素点集合对象
var obj = ctx.getImageData(起始横坐标，起始纵坐标，宽度，高度)
obj.width:行像素个数
obj.height:列像素个数
obj.data:整体像素组的颜色组成的数组
obj.data.length:像素个数的4倍（1个像素点4个颜色值）
rgba()都是0-255的范围，透明度也是
// 将图像obj写入到指定的canvas区间内
putImageData(obj,起始横坐标，起始纵坐标)
// 创建图像
createImageData(宽度，高度)