canvas要点

注意：

       1.不要用CSS控制它的宽和高,会走出图片拉伸；

        2.重新设置canvas标签的宽高属性会让画布擦除所有的内容；

        3.可以给canvas画布设置背景色。

浏览器不兼容处理：

       1.ie9以上才支持canvas,其他chrome、ff、苹果浏览器等都支持；

       2.只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)；

       3.移动端的兼容情况非常理想，基本上随便使用；

       4.2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持。

       5.浏览器不兼容，可以使用flash等手段进行降级。

  Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的，Context对象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。

基本的绘制路径：

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大

设置绘制起点(moveTo)

    语法：ctx.moveTo(x, y);

   解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置；

  参数：x,y 都是相对于 canvas盒子的最左上角；

  注意：绘制线段前必须先设置起点，不然绘制无效。

绘制直线：

 语法：ctx.lineTo(x, y);

 解释：从x,y的位置绘制一条直线到起点或者上一个线头点；

 参数：x,y 线头点坐标。

路径开始和闭合：

 开始路径：ctx.beginPath();

 闭合路径：ctx.closePath();

 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起； 

  beginPath: 核心的作用是将不同绘制的形状进行隔离， 每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

描边(stroke)：

  语法：ctx.stroke();
  解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke；
  canvas绘制的基本步骤：
                第一步：获得上下文=>canvasElem.getContext('2d');
                第二步：开始路径规划 =>ctx.beginPath()；
                第三步：移动起始点 =>ctx.moveTo(x,y)；
                第四步：绘制线(矩形、圆形、图片...)=>ctx.lineTo(x, y）；
                第五步：闭合路径=>ctx.closePath();
                第六步：绘制描边 =>ctx.stroke()；
填充(fill)：
  语法：ctx.fill();
  解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。 快速创建矩形rect()方法： 语法：ctx.rect(x, y, width, height); 解释：x, y是矩形左上角坐标， width和height都是以像素计； rect方法只是规划了矩形的路径，并没有填充和描边； rect:abbr. 矩形（rectangular）；收据（receipt） 快速创建描边矩形和填充矩形： 语法： ctx.strokeRect(x, y, width, height); 语法：ctx.fillRect(x, y, width, height); 清除矩形(clearRect)： 语法：ctx.clearRect(x, y, width, hegiht); 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。 绘制圆形（arc)： 概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise); （x,y：圆心坐标；r：半径大小；sAngle:绘制开始的角度；圆心到最右边点是0度，顺时针方向弧度增大；eAngel:结束的角度，注意是弧度。π；  counterclockwise：是否是逆时针。true是逆时针，false：顺时针；弧度和角度的转换公式： rad =deg*Math.PI/180;；在Math提供的方法中
 sin、cos等都使用的弧度） 绘制上下文的文字属性：   上下文绘制文字方法： 
    *ctx.fillText()      在画布上绘制“被填充的”文本
    * ctx.strokeText()    在画布上绘制文本（无填充）
    * ctx.measureText()   返回包含指定文本宽度的对象
    * 单词：measure 测量；估量；权衡    
    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 ); //填充文字
绘制图片（drawImage）：
  基本绘制图片的方式：
                context.drawImage(img,x,y);
                参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。
  在画布上绘制图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);  
  如果指定宽高，最好成比例，不然图片会被拉伸</em>
    等比公式：  toH = Height * toW   /  Width;  //等比
             设置高 = 原高度 * 设置宽/ 原宽度;

  图片裁剪，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)；  
   参数说明：
    sx,sy 裁剪的左上角坐标，
    swidth：裁剪图片的高度。 sheight:裁剪的高度
    （其他同上）

用JavaScript创建img对象：  
第一种方式：
   var img = document.getElementById("imgId");
第二种方式：
    var img = new Image();//这个就是 img标签的dom对象
    img.src = "imgs/arc.gif";
    img.alt = "文本信息";
    img.onload = function() {
        //图片加载完成后，执行此方法
    }