一、canvas簡介及創建context對象
HTML5<canvas>標籤用於繪製圖形，但<canvas>元素本身並沒有繪製能力。它僅僅是圖形的容器，默認寬高是300px和150px。需要通過腳本（通常是 JavaScript）繪圖。
首先獲取當前canvas對象，然後通過getContext("2d")創建context對象。每個canvas對象中都擁有一個path對象，創建自定義圖形的過程就是不斷對path對象進行操作的過程。每當開始一次新的圖形繪製任務，都需要先使用beginPath()函數重置path對象至初始狀態。
var c = document.getElementById("myCanvas");
c.style.width = "600px";
c.style.height = "300px";//此為顯示在頁面的區域寬高，並未改變繪製圖形的區域占比
var cxt = c.getContext("2d");
cxt.scale(0.5,0.5);//在x,y方向上縮放之後繪製的圖形，會改變圖形的區域占比
//設置或返回如何將一個源（新的）圖像繪製到目標（已有）的圖像上
cxt.globalCompositeOperation = "xor";