Canvas 基础篇
1.它是H5新的API
什么是API ？ 答：接口 广义上的意义
2.canvas 简介 什么是canvas？
canvas是一个html标签， 但是给js提供接口，通过JS代码可以在canvas元素上画图
canvas可以应用在 游戏 炫酷的一些效果 ，banner，报表，可视化的数据 ，地图 ，图形编辑器 ， 模拟器
3.canvas 属性 （width ，height）
4.方法 getContext（） 获取绘图环境 参数 2d，webgl ***var cxt =canvas.getContext（'2d'）;
坐标 X坐标 Y 坐标 原点 左上角
5.Canvas基本绘画
- 路径开始和闭合
- beginPath（）开启新的路径(状态) 并且结束前面的路径
- closePath() 结束当前路径 并且使当前路径闭合
--- 线
- moveTo（x，y）起始点坐标
- lineTo （x,y）绘制直线（接着上一个点）
6.快速矩形工具
* rect(x, y, w, h) 绘制矩形的路径
* strokeRect(x,y,w,h) 绘制描边的矩形
* fillStyle(x,y,w,h) 绘制的填充的矩形
* clearRect(x,y,w,h) 清除矩形（绘制的矩形区域内的内容将被擦除）
7.画圆（弧）
arc(x,y,r,start, end, true/false)
cxt.arc(300,250,150,0,Math.PI*2);
最后一个参数是表示 顺时针(false)还是逆时针(true) 默认false
8.文字
*font 属性 设置大小和字体
*textAlign 属性 文字的水平对齐方式 start(默 认)/end/left/right/center
*textBaseLine 属性 文字的垂直对齐方式 alphabetic(默认)/top/bottom/middle
* fillText(text, x, y) 填充文字
*strokeText（text，x，y）描边文字
*measureText（text）返回该文本在画布中所占的宽度
9.描边
*stroke() 填充当前路径
*strokeStyle 属性 设置描边颜色
*lineWidth 属性 设置描边线条宽度
10.填充
* fill() 填充当前的路径
* fillStyle 属性 设置填充的颜色
* 注意： 非0环绕的算法
“非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，
使此线段的终点完全落在路径范围之外。
11.浏览器不兼容处理
注：ie9以上才支持canvas,其他chrome、ff、苹果浏览器等都支持
·只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
·移动端的兼容情况非常理想，基本上随便使用
·2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
·如果浏览器不兼容，最好进行友好提示请参照下方写法进行提示
（画一个直角三角形）
//获取canvas 元素（画布）
在body中写一个<canvas id=‘mycanvas’>您的野生浏览器该换了</canvas>
var canvas = document.querySelector("#mycanvas");
//设置画布大小
canvas.width = 600;
canvas.height = 500;
canvas.style.border = "1px solid #ccc";
//获取绘图环境
var cxt = canvas.getContext("2d");
//绘制
cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(400,100);
cxt.lineTo(400,400);
cxt.lineTo(300,300);
cxt.closePath();
//描边
cxt.lineWidth = 20;
cxt.stroke();
//填充
cxt.fillStyle = "red";
cxt.fill();
12.清除画布
* 使用 clearRect()
* 重新设置 canvas的宽度 canvas.width=canvas.width
