canvas命令

基礎操作

let oC=document.getElementById('c1');
let gd=oC.getContext('2d');

gd.beginPath();           // 清除之前的一切路徑，重新開始
gd.lineWidth='50';		   // 線寬
gd.strokeStyle='yellow';  // 線顏色
gd.stroke();              // 畫線
gd.fillStyle='yellow';    // 顏色
gd.fill();                // 填充圖形

線

gd.moveTo(300, 100);      // 起點
gd.lineTo(400, 200);      // 中間點
gd.closePath();           // 閉合線條(不用closePath的 圖形不會真正閉合)
gd.stroke / fill ();

字

座標 x，y 是文字基線最左端到 canvas 左上角的距離

gd.font = '大小 字體';					// 和css的font一樣
gd.strokeText('內容', 座標x, 座標y)		// 描邊
gd.strokeText('內容', 座標x, 座標y)		// 實心

矩形

1.  gd.rect(起點x, 起點y, 寬, 高);
    gd.stroke / fill ();
2.  gd.strokeRect(...);
3.  gd.fillRect(...);

圓形

w3 arc教程

gd.arc(圓心x, 圓心y, 半徑r, 起始弧度, 終止弧度, 是否逆時針);
gd.stroke / fill ();

刪除圖形

gd.clearRect(起點x, 起點y, 寬, 高);
建議 gd.clearRect(0, 0, oC.width. oC.height);

圖片

drawImage中 的 oImg 對象可以是：

• <img>
• Image對象
• 另一個canvas
• 另一個video
• base64字符串

參數：

gd.drawImage(
    oImg,
    sx, sy, sw, sh,    // 原圖片中截取小圖
    dx, dy, dw, dh     // 小圖的擺放位置
);

let oC=document.getElementById('c1');
let gd=oC.getContext('2d');

let oImg=new Image();

oImg.src='2.jpg';
oImg.onload=function (){
  //drawImage(圖片, x, y)
  gd.drawImage(oImg, 0, 0);
};

旋轉動畫

rotate 旋轉默認整個畫布以左上角爲中心點旋轉

      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let r=0;

      requestAnimationFrame(next);

      function next(){
        gd.clearRect(0,0,oC.width,oC.height);

        r++;

        gd.save();      //保存：canvas的狀態（圖形並不保存）——顏色、translate、rotate
        gd.translate(200, 175);
        gd.rotate(r*Math.PI/180);

        gd.strokeRect(-100, -75, 200, 150);
        gd.restore();   //恢復：恢復到上一次保存的狀態

        requestAnimationFrame(next);
      }

像素級操作

gd.getImageData(座標x, 座標y, 寬, 高);	// 讀取圖片像素（跨域限制，不能讀取本地文件）
gd.putImageData(imageData, 座標x, 座標y)	// 設置像素點

video canvas配合

1. 獲取視頻每幀的圖像
2. 對其進行處理
3. 處理後繪製到canvas上

  let oV=document.getElementById('v1');
  let oC=document.getElementById('c1');
  let gd=oC.getContext('2d');

  let W=oC.width,H=oC.height;
  // 每一幀畫一次
  requestAnimationFrame(next);
  function next(){
    gd.drawImage(oV, 0, 0);
    let imageData=gd.getImageData(0, 0, W, H);
    let data=imageData.data;
    // 圖像處理
    for(let r=0;r<H;r++){
      for(let c=0;c<W;c++){
        data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
        (data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
      }
    }
    // 重新繪製像素點
    gd.putImageData(imageData, 0, 0);

    requestAnimationFrame(next);
  }

圖形後續處理

用戶打開、下載、存到服務器

注意點

• 繪圖區大小：通過行內樣式給 width height
• 視覺大小： 通過 style 樣式表設置
• 每開始一個新路徑時，都要 beginPath()
• 自適應：改變行內樣式的寬高，裏面圖形自動縮放
• rotate 旋轉默認整個畫布以左上角爲中心點旋轉
• 建議：beginPath()、save()、restore()必加

<canvas id="c1" width="300" height="300"></canvas>

特點
不會保存圖形：圖形不能修改，只能刪了重畫

性能
clearRect() 性能極高
只有繪圖次數影響性能