HTML5畫布(CANVAS)速查簡表

• HTML5畫布(CANVAS)元素

  >HTML5畫布(Canvas)元素

  <canvas id="myCanvas" width="500" height="300">
  

  瀏覽器不支持畫布(canvas)時的備案

  <canvas id="myCanvas" width="500" height="300">
    your browser doesn't support canvas!
  </canvas>
  

  2d context

  var context = canvas.getContext('2d');
  

  Webgl context (3d)

  var context = canvas.getContext('webgl');
  

• 圖形

  繪製方形

  context.rect(x, y, width, height);
  context.fill();
  context.stroke();
  

  填充區域

  context.fillRect(x, y, width, height);
  

  繪製方形的邊框

  context.strokeRect(x, y, width, height);
  

  繪製圓形

  context.arc(x, y, radius, 0, Math.PI * 2);
  context.fill();
  context.stroke();
  

• 風格

  填充

  context.fillStyle = 'red';
  context.fill();
  

  勾勒

  context.strokeStyle = 'red';
  context.stroke();
  

  線性漸變

  var grd = context.createLinearGradient(x1, y1, x2, y2);
  grd.addColorStop(0, 'red');   
  grd.addColorStop(1, 'blue');
  context.fillStyle = grd;
  context.fill();
  

  徑向漸變

  var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
  grd.addColorStop(0, 'red');
  grd.addColorStop(1, 'blue');
  context.fillStyle = grd;
  context.fill();
  

  圖案

  var imageObj = new Image();
  imageObj.onload = function() {
    var pattern = context.createPattern(imageObj, 'repeat');
    context.fillStyle = pattern;
    context.fill();
  };
  imageObj.src = 'path/to/my/image.jpg';
  

  交點

  context.lineJoin = 'miter|round|bevel';
  

  線頭

  context.lineCap = 'butt|round|square';
  

  陰影

  context.shadowColor = 'black';
  context.shadowBlur = 20;
  context.shadowOffsetX = 10;
  context.shadowOffsetY = 10;
  

  Alpha (透明)

  context.globalAlpha = 0.5; // between 0 and 1
  

• 顏色格式

  字符串

  context.fillStyle = 'red';
  

  16進制

  context.fillStyle = '#ff0000';
  

  16進制簡寫

  context.fillStyle = '#f00';
  

  RGB

  context.fillStyle = 'rgb(255,0,0)';
  

  RGBA

  context.fillStyle = 'rgba(255,0,0,1)';
  

• 路徑

  開始路徑

  context.beginPath();
  

  畫線

  context.lineTo(x, y);
  

  弧形

  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  

  二次曲線

  context.quadraticCurveTo(cx, cy, x, y);
  

  二次曲線

  context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
  

  關閉路徑

  context.closePath();
  

• 圖片

  畫圖

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, x, y);
  };
  imageObj.src = 'path/to/my/image.jpg';
  

  指定尺寸畫圖

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, x, y, width, height);
  };
  imageObj.src = 'path/to/my/image.jpg';
  

  裁剪圖片

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
  };
  imageObj.src = 'path/to/my/image.jpg';
  

• 文本

  寫文字

  context.font = '40px Arial';
  context.fillStyle = 'red';
  context.fillText('Hello World!', x, y);
  

  寫鏤空文字

  context.font = '40pt Arial';
  context.strokeStyle = 'red';
  context.strokeText('Hello World!', x, y);
  

  粗體

  context.font = 'bold 40px Arial';
  

  斜體

  context.font = 'italic 40px Arial';
  

  對齊方式

  context.textAlign = 'start|end|left|center|right';
  

  文字基線

  context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
  |bottom';
  

  獲取文本寬度

  var width = context.measureText('Hello world').width;
  

• 動畫

  移動

  context.translate(x, y);
  

  擴大縮小

  context.scale(x, y);
  

  旋轉

  context.rotate(radians);
  

  水平翻轉

  context.scale(-1, 1);
  

  上下翻轉

  context.scale(1, -1);
  

  自定義變換

  context.transform(a, b, c, d ,e, f);
  

  設置變換

  context.setTransform(a, b, c, d ,e, f);
  

  切割

  context.transform(1, sy, sx, 1, 0, 0);
  

  重置

  context.setTransform(1, 0, 0, 1, 0, 0);
  

• 狀態存儲

  存儲

  context.save();
  

  恢復

  context.restore();
  

• 裁剪

  裁剪

  // draw path here
  context.clip();
  

• 圖像數據

  獲取圖像數據

  var imageData = context.getImageData(x, y, width, height);
  var data = imageData.data;
  

  遍歷像素點

  var imageData = context.getImageData(x, y, width, height);
  var data = imageData.data;
  var len = data.length;
  var i, red, green, blue, alpha;
  
  for(i = 0; i < len; i += 4) {
    red = data[i];
    green = data[i + 1];
    blue = data[i + 2];
    alpha = data[i + 3];
  }
  

  沿座標遍歷像素點

  var imageData = context.getImageData(x, y, width, height);
  var data = imageData.data;
  var x, y, red, green, blue, alpha;
  
  for(y = 0; y < imageHeight; y++) {
    for(x = 0; x < imageWidth; x++) {
      red = data[((imageWidth * y) + x) * 4];
      green = data[((imageWidth * y) + x) * 4 + 1];
      blue = data[((imageWidth * y) + x) * 4 + 2];
      alpha = data[((imageWidth * y) + x) * 4 + 3];
    }
  }
  

  設置圖像數據

  context.putImageData(imageData, x, y);
  

• DATA URLS

  獲取Data URL

  var dataURL = canvas.toDataURL();
  

  使用Data URL生成圖像

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
  };
  
  imageObj.src = dataURL;
  

• 合成

  合成操作

  context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';