move end 可選 light var 結束 creat 邊緣 刮刮樂

const canvas = document.getElementById(‘canvas‘); // 2、畫筆 --- canvas的上下文對象 const ctx = canvas.getContext(‘2d‘);
// 3、設置顏色 ---- 調色 ctx.fillStyle = "red"; // 填充顏色的設置 ctx.strokeStyle = ‘blue‘; // 輪廓（邊框）顏色的設置
// 4、線條的設置 ctx.lineWidth = 10; // 線寬的設置 ctx.lineCap = ‘butt/round/square‘; // 線條邊緣設置--- 不設置、手機加圓殼、手機加方殼 ctx.lineJoin = ‘miter/bevel/round‘; // 線條相交樣式--- 尖尖的、平平的、圓圓的
// 5、繪制矩形 -- 確定區域 ctx.rect(x, y, w, h); // ctx.fillRect(x, y, w, h) 無需單獨再上色，確定區域並且直接上色 // ctx.strokeRect(x, y, w, h)
// 6、繪制圓弧 // startAngle endAngle ---- 用的不是角度，用的是弧度 // bool false--- 順時針 true----逆時針 默認值為false --- 可選參數 ctx.arc(x, y, r, startAngle, endAngle[, bool])
// 7、繪制線段 ctx.moveTo(x, y); // 從哪裏開始畫 ctx.lineTo(x1, y1); // 畫到那裏去
// 8、繪制貝塞爾曲線 ctx.bezierCurveTo(x0, y0, cx0, cy0, x1, y1); // 起始點、控制點、終止點 ctx.quadraticCurveTo(cx1, cy1, x2, y2); // 控制點、終止點-上一個的終止點作為它的起始點
// 9、線性漸變 var lg = ctx.createLinearGradient(x, y, w, h) // 確定漸變區域 lg.addColorStop(0,"#f00"); lg.addColorStop(1,"#fff"); ctx.fillStyle = lg; //調色 --- 調的是漸變色 ctx.strokeStyle = lg;
// 10、徑向漸變 var rg = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) rg.addColorStop(0,"#f00"); rg.addColorStop(1,"#fff"); ctx.fillStyle = rg; //調色 --- 調的是漸變色 ctx.strokeStyle = rg;
// 11、圖像 ctx.drawImage(img, x, y) // 圖片img放到那裏去 ctx.drawImage(img, x, y, w, h) // 圖片img放到那裏去,寬高為多少 ctx.drawImage(img, x0, y0, fw, fh, x, y, w, h) // 截取img，從哪裏開始，截取多少，放到那裏去，寬高為多少
// 12、開始和結束繪制 ctx.beginPath(); // 重新開始繪制 --- 畫完洗了畫筆，重新開始繪制 ctx.closePath(); // 結束
// 13、保存和恢復狀態 ctx.save(); ctx.restore();
// 14、繪制圖像的先後順序影響圖像的顯示 ---- 圖像組合 ctx.globalCompositeOperation = typeo /** source-over（默認值）:在原有圖形上繪制新圖形 destination-over:在原有圖形下繪制新圖形 source-in:顯示原有圖形和新圖形的交集，新圖形在上，所以顏色為新圖形的顏色 destination-in:顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色為原有圖形的顏色 source-out:只顯示新圖形非交集部分 destination-out:只顯示原有圖形非交集部分,是將交集的部分轉化為透明 --------- 刮刮樂 source-atop:顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色為新圖形的顏色 destination-atop:顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色為原有圖形的顏色 lighter:原有圖形和新圖形都顯示，交集部分做顏色疊加 xor:重疊部分不顯示 copy:只顯示新圖形 */
// 填充或者繪制邊框 --- 上色 ctx.fill(); ctx.stroke();

canvas 畫布基本操作