canvas标签/上下文 绘制路径/描边/填充 绘制矩形/弧形/文字/图片

canvas标签语法

• 定义: canvas，双标签，需要闭合。画布默认大小width和height：默认300*150像素
• 注意
  • 不要用CSS控制它的宽/高: 会导致内部图片被拉伸(使用行内设置不会造成拉伸)
  • 擦拭画布内容: 重新设置canvas标签的宽高属性
  • 单位： px，可以设置width和height属性，否则忽略单位。

浏览器不兼容处理

• ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持

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

• 移动设备几乎支持Canvas的所有API

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

• 如果浏览器不兼容，最好进行友好提示, 例如：

    
    你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
    
    //  如果浏览器不兼容，可以使用flash等方式进行替换。
  

上下文context

• 定义: 是所有的绘制操作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' );
    

基本的绘制路径

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

2. 设置绘制起点

   • 语法: ctx.moveTo(x,y); 设置上下文绘制路径的起点
   • 参数: x,y是相对于canvas坐标系原点的x, y的值
   • 注意: 绘制线段前必须设置起点, 否则绘制无效

3. 绘制直线

   • 语法: ctx.lineTo(x, y); 从起点位置(上一点)绘制到x,y的位置

4. 路径开始和闭合

   • 默认情况下会延用之前的路径
   • ctx.beginPath(); 让当前的路径和之前的路径隔离开, 方便对当前的路径进行一些设置(颜色,线条的宽度)
     • 当前的设置不再影响之前已经绘制的内容
       ctx.beginPath();
   • ctx.closePath(); 闭合路径会自动把终点和起点连接起来

5. 描边

   • 语法：ctx.stroke();
   • 说明：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

Canvas绘制矩形

• 矩形rect()方法

  • 语法：ctx.rect(x, y, width, height);
  • 说明：x, y是矩形左上角坐标， width和height都是以像素计
  • 注意: rect方法只是规划了矩形的路径，并没有填充和描边。

• 快速创建描边矩形/填充矩形

  1. 语法： ctx.strokeRect(x, y, width, height);
     • 参数跟ctx.rect();相同，注意此方法绘制完路径后立即进行stroke绘制
  2. 语法：ctx.fillRect(x, y, width, height);
     • 参数跟ctx.rect();相同， 此方法执行完成后。立即对当前矩形进行fill填充。

• 清除矩形

  • 语法：ctx.clearRect(x, y, width, hegiht);
  • 说明: 清除某个矩形内的绘制的内容，相当于橡皮擦。

Canvas绘制弧线

• 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
• 概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
  • arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk]
  • counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
  • 在Math提供的方法中sin、cos等都使用的弧度
    • 角度-->弧度： rad = deg*Math.PI/180;
• 参数
  • x,y：圆心坐标。
  • r：半径大小。
  • sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
  • eAngel:结束的角度，注意是弧度。π
  • counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)

非零正交原则

• 语法：ctx.fill();

• 说明: 填充，是将闭合的路径的内容填充具体的颜色。默认黑色

• 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

• 原则(使用一个初始值为0 的计数器判断该区域是否填充)

  1. 对于路径中任意给定的区域,从该区域内部画一条足够长的线段,使此线段的终点完全落在路径范围外部.
  2. 如果线段是与路径的顺时针部分相交，则计数器加1
  3. 如果线段是与路径的逆时针部分相交，则计数器减1
  4. 若计数器的最终值不是0，那么此区域就在路径里面,在调用fill()方法时，浏览器就会对其进行填充
  5. 如果计数器最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充
  

  非零正交原则

Canvas绘制文字

1. textAlign : 设置或返回文本内容的当前对齐方式

   • 取值
     • start : 默认。文本在指定的位置开始。
     • end : 文本在指定的位置结束。
     • center: 文本的中心被放置在指定的位置。
     • left : 文本左对齐。

     • right : 文本右对齐。

       
       
       

       文本内容的当前对齐方式

2. textBaseline 设置或返回在绘制文本时使用的当前文本基线

   • 取值

     • alphabetic ： 默认。文本基线是普通的字母基线。
     • top ： 文本基线是 em 方框的顶端。。
     • anging ： 文本基线是悬挂基线。
     • middle ： 文本基线是 em 方框的正中。
     • ideographic： 文本基线是em基线。
     • bottom ： 文本基线是 em 方框的底端。
     

     文本时使用的当前文本基线

3. 上下文绘制文字方法
   • ctx.fillText() 在画布上绘制“被填充的”文本
   • ctx.strokeText() 在画布上绘制文本（无填充）
   • ctx.measureText()返回包含指定文本宽度的对象

        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 );        //填充文字

4. 文字阴影和模糊范围

         //设置阴影的颜色
        ctx.shadowColor = 'orange';         
        //设置模糊范围
        ctx.shadowBlur = 15;
        ctx.shadowOffsetX = -10; //水平偏移量
        ctx.shadowOffsetY = 20; //垂直偏移量
   

Canvas绘制图片

基本绘制图片的方式

1. context.drawImage(img,x,y);

   • 参数: x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象。

2. 在画布上绘制图像-规定图像的宽高

   • 语法: context.drawImage(img,x,y,width,height);
   • 参数：width 绘制图片的宽度, height：绘制图片的高度
     • 如果指定宽高，最好成比例，不然图片会被拉伸(toH = Height * toW / Width)
     • 设置的高度 = 原高度 * 设置的宽度 / 原宽度

3. 图片裁剪，并在画布上定位被剪切

   • 语法: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
   • 参数
     • sx,sy 裁剪的左上角坐标，
     • swidth：裁剪图片的高度。
     • sheight:裁剪的高度
     • 其他同上

4. 用JavaScript创建img对象

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