《版本支持》
最新标准：http://www.w3.org/TR/2dcontext/
稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
?{s��vh�^d
注意的知识点：
01、
用JavaScript创建img对象
第一种方式：
var img = document.getElementById("imgId");
第二种方式：
var img = new Image();//这个就是img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后，执行此方法
}
2.1.1 canvas标签语法和属性 （重点）
canvas：画布油布的意思 英 ['kænvəs] 美 ['kænvəs]
标签名：canvas，双标签，需要闭合。
单位： px，可以设置width和height属性，否则忽略单位。
width和hegiht：默认300*150像素
注意：
不要用CSS控制它的宽和高,会导致内部图片被拉伸，
重新设置canvas标签的宽高属性会让画布擦除所有的内容，
可以给canvas画布设置背景色
2.1.2 浏览器不兼容处理（重点）
ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
移动设备几乎支持Canvas的所有API
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果浏览器不兼容，最好进行友好提示, 例如：
你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
如果浏览器不兼容，可以使用flash等方式进行替换。
2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握）
上下文：是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容，Canvas的绘图是使用JS调用Canvas的接口来完成的。
Context对象就是JavaScript操作Canvas的接口。 *使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。
//获得画布
var canvas = document.getElementById( 'cavsElem' );
//注意：2d小写，二维， 3d：webgl
var ctx = canvas.getContext( '2d' );
2.3.2 设置绘制起点(moveTo)
* 语法：ctx.moveTo(x, y);
* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数：x,y 都是相对于 canvas盒子的最左上角。
* 注意：**绘制线段前必须先设置起点，不然绘制无效。**
2.3.3 绘制直线(lineTo)
* 语法：ctx.lineTo(x, y);
* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数：x,y 线头点坐标。
2.3.4 路径开始和闭合
* 开始路径：ctx.beginPath();
* 闭合路径：ctx.closePath();
* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离，
每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。
2.3.5 描边(stroke)
* 语法：ctx.stroke();
* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke
* stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘
英 [strəʊk] 美 [strok]
canvas绘制的基本步骤：
第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();
html部分：
当前浏览器不支持canvas，请升级浏览器版本
javascript部分：
//===============基本绘制api====================
//获得画布
var canvas = document.querySelector('#canvas');
//获得上下文
var ctx = canvas.getContext('2d');
canvas.width = 800; //设置标签的属性宽高
canvas.height = 600;
canvas.style.border = "1px solid #000";
//绘制三角形
ctx.beginPath(); //开始路径
ctx.moveTo(100,100); //三角形，左顶点
ctx.lineTo(300, 100); //右顶点
ctx.lineTo(300, 300); //底部的点
ctx.closePath(); //结束路径
ctx.stroke(); //描边路径
2.3.6 填充(fill)
* 语法：ctx.fill();
* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。
2.3.7 快速创建矩形rect()方法
* 语法：ctx.rect(x, y, width, height);
* 解释：x, y是矩形左上角坐标， width和height都是以像素计
* rect方法只是规划了矩形的路径，并没有填充和描边。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收据（receipt）
2.3.8 快速创建描边矩形和填充矩形
* 语法： ctx.strokeRect(x, y, width, height);
- 参数跟2.3.8相同，注意此方法绘制完路径后立即进行stroke绘制
* 语法：ctx.fillRect(x, y, width, height);
- 参数跟2.3.8相同， 此方法执行完成后。立即对当前矩形进行fill填充。
2.3.9清除矩形(clearRect)
* 语法：ctx.clearRect(x, y, width, hegiht);
* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。
《2.4 绘制圆形（arc)》
概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk]
counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
解释：
x,y：圆心坐标。
r：半径大小。
sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
eAngel:结束的角度，注意是弧度。π
counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)
弧度和角度的转换公式： rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度
三角函数的补充
Math.sin(弧度); //夹角对面的边 和 斜边的比值
Math.cos(弧度); //夹角侧边 与斜边的比值
圆形上面的点的坐标的计算公式
x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
y =y0 + Math.sin(rad) * R;//注意都是弧度
2.5.1 绘制上下文的文字属性 （有印象就行了）
2.5.2 上下文绘制文字方法
* ctx.fillText() 在画布上绘制“被填充的”文本
* ctx.strokeText() 在画布上绘制文本（无填充）
* ctx.measureText() 返回包含指定文本宽度的对象
* 单词：measure 测量；估量；权衡 英 ['meʒə] 美 ['mɛʒɚ]
//综合案例代码：
ctx.moveTo( 300, 300 );
ctx.fillStyle = "purple"; //设置填充颜色为紫色
ctx.font = '20px "微软雅黑"'; //设置字体
ctx.textBaseline = "bottom"; //设置字体底线对齐绘制基线
ctx.textAlign = "left"; //设置字体对齐的方式
//ctx.strokeText( "left", 450, 400 );
ctx.fillText( "Top-g", 100, 300 ); //填充文字
《2.6 绘制图片（drawImage）》 （重点）
2.6.1 基本绘制图片的方式
context.drawImage(img,x,y);
参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。
2.6.2 在画布上绘制图像，并规定图像的宽度和高度
context.drawImage(img,x,y,width,height);
参数说明：width 绘制图片的宽度,
height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸
等比公式： toH = Height * toW / Width;
设置的高度 = 原高度 * 设置的宽度 / 原宽度;
2.6.3 图片裁剪，并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：
sx,sy 裁剪的左上角坐标，
swidth：裁剪图片的高度。 sheight:裁剪的高度
其他同上
2.6.4 用JavaScript创建img对象
第一种方式：
var img = document.getElementById("imgId");
第二种方式：
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后，执行此方法
}
