canvas標(biāo)簽語法

• 定義: canvas，雙標(biāo)簽，需要閉合。畫布默認(rèn)大小width和height：默認(rèn)300*150像素
• 注意
  • 不要用CSS控制它的寬/高: 會導(dǎo)致內(nèi)部圖片被拉伸(使用行內(nèi)設(shè)置不會造成拉伸)
  • 擦拭畫布內(nèi)容: 重新設(shè)置canvas標(biāo)簽的寬高屬性
  • 單位： px，可以設(shè)置width和height屬性，否則忽略單位。

瀏覽器不兼容處理

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

• 只要瀏覽器兼容canvas，那么就會支持絕大部分api(個別最新api除外)

• 移動設(shè)備幾乎支持Canvas的所有API

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

• 如果瀏覽器不兼容，最好進(jìn)行友好提示, 例如：

    <canvas id="canvas">
    你的瀏覽器不支持canvas，請升級瀏覽器.瀏覽器不支持，顯示此行文本
    </canvas>
    //  如果瀏覽器不兼容，可以使用flash等方式進(jìn)行替換。
  

上下文context

• 定義: 是所有的繪制操作api的入口/集合。
• Canvas自身無法繪制任何內(nèi)容，Canvas的繪圖是使用JS調(diào)用Canvas的接口來完成的。
• Context對象: JavaScript操作Canvas的接口。

  • [CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文

      //獲得畫布
      var canvas  = document.getElementById( 'cavsElem' );
      //注意：2d小寫，二維， 3d：webgl
      var ctx = canvas.getContext( '2d' );
    

基本的繪制路徑

1. canvas坐標(biāo)系，從最左上角0,0開始。x向右增大， y向下增大

2. 設(shè)置繪制起點(diǎn)

   • 語法: ctx.moveTo(x,y); 設(shè)置上下文繪制路徑的起點(diǎn)
   • 參數(shù): x,y是相對于canvas坐標(biāo)系原點(diǎn)的x, y的值
   • 注意: 繪制線段前必須設(shè)置起點(diǎn), 否則繪制無效

3. 繪制直線

   • 語法: ctx.lineTo(x, y); 從起點(diǎn)位置(上一點(diǎn))繪制到x,y的位置

4. 路徑開始和閉合

   • 默認(rèn)情況下會延用之前的路徑
   • ctx.beginPath(); 讓當(dāng)前的路徑和之前的路徑隔離開, 方便對當(dāng)前的路徑進(jìn)行一些設(shè)置(顏色,線條的寬度)
     • 當(dāng)前的設(shè)置不再影響之前已經(jīng)繪制的內(nèi)容
       ctx.beginPath();
   • ctx.closePath(); 閉合路徑會自動把終點(diǎn)和起點(diǎn)連接起來

5. 描邊

   • 語法：ctx.stroke();
   • 說明：根據(jù)路徑繪制線。路徑只是草稿，真正繪制線必須執(zhí)行stroke

Canvas繪制矩形

• 矩形rect()方法

  • 語法：ctx.rect(x, y, width, height);
  • 說明：x, y是矩形左上角坐標(biāo)， width和height都是以像素計(jì)
  • 注意: rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊。

• 快速創(chuàng)建描邊矩形/填充矩形

  1. 語法： ctx.strokeRect(x, y, width, height);
     • 參數(shù)跟ctx.rect();相同，注意此方法繪制完路徑后立即進(jìn)行stroke繪制
  2. 語法：ctx.fillRect(x, y, width, height);
     • 參數(shù)跟ctx.rect();相同， 此方法執(zhí)行完成后。立即對當(dāng)前矩形進(jìn)行fill填充。

• 清除矩形

  • 語法：ctx.clearRect(x, y, width, hegiht);
  • 說明: 清除某個矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦。

Canvas繪制弧線

• 語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
• 概述：arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。
  • arc: ?。ǘ龋┗⌒挝?；天穹 英 [ɑ?k] 美 [ɑrk]
  • counter 反擊，還擊；反向移動，對著干；反駁，回答 ['ka?nt?] 美 ['ka?nt?]
  • 在Math提供的方法中sin、cos等都使用的弧度
    • 角度-->弧度： rad = deg*Math.PI/180;
• 參數(shù)
  • x,y：圓心坐標(biāo)。
  • r：半徑大小。
  • sAngle:繪制開始的角度。 圓心到最右邊點(diǎn)是0度，順時針方向弧度增大。
  • eAngel:結(jié)束的角度，注意是弧度。π
  • counterclockwise：是否是逆時針。true是逆時針，false：順時針(默認(rèn))

非零正交原則

• 語法：ctx.fill();

• 說明: 填充，是將閉合的路徑的內(nèi)容填充具體的顏色。默認(rèn)黑色

• 注意：交叉路徑的填充問題，“非零環(huán)繞原則”，順逆時針穿插次數(shù)決定是否填充。

• 原則(使用一個初始值為0 的計(jì)數(shù)器判斷該區(qū)域是否填充)

  1. 對于路徑中任意給定的區(qū)域,從該區(qū)域內(nèi)部畫一條足夠長的線段,使此線段的終點(diǎn)完全落在路徑范圍外部.
  2. 如果線段是與路徑的順時針部分相交，則計(jì)數(shù)器加1
  3. 如果線段是與路徑的逆時針部分相交，則計(jì)數(shù)器減1
  4. 若計(jì)數(shù)器的最終值不是0，那么此區(qū)域就在路徑里面,在調(diào)用fill()方法時，瀏覽器就會對其進(jìn)行填充
  5. 如果計(jì)數(shù)器最終值是0，那么此區(qū)域就不在路徑內(nèi)部，瀏覽器也就不會對其進(jìn)行填充
  非零正交原則

Canvas繪制文字

1. textAlign : 設(shè)置或返回文本內(nèi)容的當(dāng)前對齊方式

   • 取值
     • start : 默認(rèn)。文本在指定的位置開始。
     • end : 文本在指定的位置結(jié)束。
     • center: 文本的中心被放置在指定的位置。
     • left : 文本左對齊。

     • right : 文本右對齊。

       
       
       文本內(nèi)容的當(dāng)前對齊方式

2. textBaseline 設(shè)置或返回在繪制文本時使用的當(dāng)前文本基線

   • 取值

     • alphabetic ： 默認(rèn)。文本基線是普通的字母基線。
     • top ： 文本基線是 em 方框的頂端。。
     • anging ： 文本基線是懸掛基線。
     • middle ： 文本基線是 em 方框的正中。
     • ideographic： 文本基線是em基線。
     • bottom ： 文本基線是 em 方框的底端。
     文本時使用的當(dāng)前文本基線

3. 上下文繪制文字方法
   • ctx.fillText() 在畫布上繪制“被填充的”文本
   • ctx.strokeText() 在畫布上繪制文本（無填充）
   • ctx.measureText()返回包含指定文本寬度的對象

        ctx.moveTo( 300, 300 );
        ctx.fillStyle = "purple";               //設(shè)置填充顏色為紫色
        ctx.font = '20px "微軟雅黑"';           //設(shè)置字體
        ctx.textBaseline = "bottom";            //設(shè)置字體底線對齊繪制基線
        ctx.textAlign = "left";                 //設(shè)置字體對齊的方式
        //ctx.strokeText( "left", 450, 400 );
        ctx.fillText( "Top-g", 100, 300 );        //填充文字

4. 文字陰影和模糊范圍

         //設(shè)置陰影的顏色
        ctx.shadowColor = 'orange';         
        //設(shè)置模糊范圍
        ctx.shadowBlur = 15;
        ctx.shadowOffsetX = -10; //水平偏移量
        ctx.shadowOffsetY = 20; //垂直偏移量
   

Canvas繪制圖片

基本繪制圖片的方式

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

   • 參數(shù): x,y 繪制圖片左上角的坐標(biāo)，在畫布上繪制的坐標(biāo)點(diǎn) img是繪制圖片的dom對象。

2. 在畫布上繪制圖像-規(guī)定圖像的寬高

   • 語法: context.drawImage(img,x,y,width,height);
   • 參數(shù)：width 繪制圖片的寬度, height：繪制圖片的高度
     • 如果指定寬高，最好成比例，不然圖片會被拉伸(toH = Height * toW / Width)
     • 設(shè)置的高度 = 原高度 * 設(shè)置的寬度 / 原寬度

3. 圖片裁剪，并在畫布上定位被剪切

   • 語法: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
   • 參數(shù)
     • sx,sy 裁剪的左上角坐標(biāo)，
     • swidth：裁剪圖片的高度。
     • sheight:裁剪的高度
     • 其他同上

4. 用JavaScript創(chuàng)建img對象

        //第一種方式：
        var img = document.getElementById("imgId");
        //第二種方式：
        var img = new Image();//這個就是 img標(biāo)簽的dom對象
        img.src = "imgs/arc.gif";
        img.alt = "文本信息";
        img.onload = function() {
            //圖片加載完成后，執(zhí)行此方法
        }