Canvas繪圖 Canvas簡介 2D繪圖工具 移動、選轉、縮放
Canvas簡介 是一個HTML元件，IE9以前不支援 必須先定義，然後指定繪圖環境 var canvas = document.getElementById('aaa'); var ctx = canvas.getContext('2d');
2D繪圖工具（一） 矩形 fillRect(x, y, width, height) 填滿矩形。 strokeRect(x, y, width, height) 矩形邊框 clearRect(x, y, width, height) 清空 矩形區域 顏色 strokeStyle 劃線顏色 fillStyle 填滿顏色
2D繪圖工具（二） 路徑 beginPath(),closePath() stroke(),fill() moveto() 移動不劃線,lineto()畫直線 弧形 arc(x, y, 半徑, 開始角度, 結束角度, 是 否逆時針) 二次貝茲曲線 quadraticCurveTo(cp1x, cp1y, x, y)， 控制點由cp1x, cp1y指定。
2D繪圖工具（三） 三次貝茲曲線 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)控制點由(cp1x, cp1y)和 (cp2x, cp2y)指定。 線條樣式 lineWidth:線寬度 lineCap：端點：butt平round圓square外 凸一點 lineJoin:連接點：round圓,bevel,miter 文字：strokeText() fillText()
2D繪圖工具（四） 漸層 createLinearGradient(x1, y1, x2, y2) createRadialGradient(x1, y1, r1, x2, y2, r2)放射狀漸層物件，起始圓之圓心 落在 (x1, y1)、半徑為r1，結束圓之圓心落在(x2, y2)、半徑為r2。 addColorStop 加顏色 var lineargradient = ctx.createLinearGradient(0,0,200,200); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black');
2D繪圖工具（五） 影像 drawImage(image, x, y) drawImage(image,x, y, width, height) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 不好的範例 var img = new Image(); // Create new img element img.src = 'myImage.png'; // Set source path 實際上的用法 var img = new Image(); // Create new img element img.addEventListener("load", function() { // execute drawImage statements here }, false); img.src = 'myImage.png'; // Set source path 參考https://developer.mozilla.org/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial
移動、旋轉、縮放 save() 儲存現階段畫布完整狀態。 restore()復原最近一次儲存的畫布狀態。 translate(x, y) 移動畫布 rotate(x) 以原點為中心旋轉畫布 scale(x, y) x軸與y軸縮放
作業三 畫張漂亮的圖，且可以用按鈕控制其上下左右 移動