【JavaScript高級程序設計】第15章（canvas）

Canvas 基本API

• getContext

var canvas = document.getElementById("myCanvas");
var imgURI = canvas.toDataURL("image/png");
var img = document.createElement("img");
img.src = imgURI;
document.body.appendChild(img);

• 填充fill和描邊stroke
  • fillStyle
  • strokeStyle
• 矩形
  • fillRect
  • strokeRect
  • clearRect

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// rect 1
context.lineWidth = 20;
context.lineCap = "square"; // butt截平, round, square
context.lineJoin = "miter"; // round, bevel斜交, miter斜接
context.strokeStyle = "#ff000";
context.strokeRect(10, 10, 500, 500);
// rect 2
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 500, 500);

• 路徑
  • beginPath
  • arc
  • arcTo
  • bezierCurveTo
  • lineTo
  • moveTo
  • quadraticCurveTo
  • rect
  • closePath
  • stroke
  • fill
  • isPointInPath(x,y)

// 鐘錶
context.beginPath();
context.arc(50, 50, 40, 0, 2 * Math.PI);
context.moveTo(100, 50);
context.arc(50, 50, 50, 0, 2 * Math.PI);
// 分針
context.moveTo(50, 50);
context.lineTo(50, 35);
// 時針
context.moveTo(50, 50);
context.lineTo(25, 50);
context.stroke();

• 文本
  • fillText(str, x, y, maxPixel)
  • strokeText
  • font
  • textAlign: “start”,“end”,“center”
  • textBaseline: “top”,“hanging”,“middle”,“alphabetic”,“ideographic”,“bottom”

// 文本
context.font = "bold 14px Arial";
context.textAlign = "start";
context.textBaseline = "middle";
context.fillText("12", 50, 20);

• 變換
  • translate(x,y) 變換原點
  • rotate(angle) 整個context旋轉
  • save() 將來還要返回某一狀態
  • restore()返回上一狀態
  • save和restore就好比棧結構的push和pop

// 變換原點
context.translate(50, 50);
// 旋轉指針
context.rotate(Math.PI/2);

• 圖像

  • drawImage(image, src_x, src_y, src_w, src_h, obj_x, obj_y, obj_w, obj_h)
  • canvas.toDataURL

• 陰影

  • shadowColor 陰影色
  • shadowOffsetX 水平偏移
  • shadowOffsetY 垂直偏移
  • shadowBlur 模糊（暈開）

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "red";
context.fillStyle = "blue";
context.fillRect(50, 50, 100, 100);

• 漸變
  • CanvasGradient對象的實例
  • createLinearGradient(start_x, start_y, end_x, end_y) 線性漸變
  • addColorStop(position, color)指定色標
  • createRadialGradient() 徑向漸變

var gradient = context.createLinearGradient(200,250,300,250);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

context.fillStyle = "red";
context.fillRect(50,50,100,100);

context.fillStyle = gradient;
context.fillRect(200,200,100,10);

• 模式

  • 模式其實就是重複的圖像
  • createPattern()
  • repeat,repeat-x,repeat-y,no-repeat

• 使用圖像數據

  • getImageData(x, y, w, h) 返回imageData對象實例
  • 每個ImageData對象都有是三個屬性：width，height，data
  • data屬性是一個數組，保存着rgba的值
  • putImageData(img, x, y)

var imageData = context.getImageData(0, 0, 100, 100);
console.log(imageData);
// 灰階過濾器
for(let i = 0; i < imageData.data.length; i+=4){
	let r = imageData.data[i];
	let g = imageData.data[i+1];
	let b = imageData.data[i+2];
	let a = imageData.data[i+3];
	let average = Math.floor((r+g+b)/3);
	imageData.data[i] = average;
	imageData.data[i+1] = average;
	imageData.data[i+2] = average;
}
context.putImageData(imageData, 100, 100);

• 合成
  • globalAlpha
  • globalCompositionOperation
    • source-over,destination-over
    • source-in,destination-in
    • source-out,destination-out
    • source-atop,destination-atop
    • lighter
    • copy
    • xor