Canvas繪圖 Canvas簡介 2D繪圖工具 移動、選轉、縮放.

Presentation on theme: "Canvas繪圖 Canvas簡介 2D繪圖工具 移動、選轉、縮放."— Presentation transcript:

1 Canvas繪圖 Canvas簡介 2D繪圖工具 移動、選轉、縮放

2 Canvas簡介 是一個HTML元件，IE9以前不支援 必須先定義，然後指定繪圖環境
var canvas = document.getElementById('aaa'); var ctx = canvas.getContext('2d');

3 2D繪圖工具（一） 矩形 fillRect(x, y, width, height) 填滿矩形。
strokeRect(x, y, width, height) 矩形邊框 clearRect(x, y, width, height) 清空 矩形區域 顏色 strokeStyle 劃線顏色 fillStyle 填滿顏色

4 2D繪圖工具（二） 路徑 beginPath(),closePath() stroke(),fill()
moveto() 移動不劃線,lineto()畫直線 弧形 arc(x, y, 半徑, 開始角度, 結束角度, 是 否逆時針) 二次貝茲曲線 quadraticCurveTo(cp1x, cp1y, x, y)， 控制點由cp1x, cp1y指定。

5 2D繪圖工具（三） 三次貝茲曲線 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)控制點由(cp1x, cp1y)和 (cp2x, cp2y)指定。 線條樣式 lineWidth:線寬度 lineCap：端點：butt平round圓square外 凸一點 lineJoin:連接點：round圓,bevel,miter 文字：strokeText() fillText()

6 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');

7 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 參考

8 移動、旋轉、縮放 save() 儲存現階段畫布完整狀態。 restore()復原最近一次儲存的畫布狀態。
translate(x, y) 移動畫布 rotate(x) 以原點為中心旋轉畫布 scale(x, y) x軸與y軸縮放

9 作業三 畫張漂亮的圖，且可以用按鈕控制其上下左右 移動