HTML5_canvas_PIXNET

Transcript

1. HTML5 <canvas></canvas> JavaScript 繪圖基本功能介紹 PIXNET 前端組 CypressKuo 2016/10/07 1
2. <canvas> Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering. 2 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API 2
3. 基本設置 3
4. <canvas id="canvas" width="1024" height="768"> 本瀏覽器不⽀支援 canvas，請升級！ </canvas> var canvas = document.getElementById("canvas"); canvas.width = 1024; canvas.height = 768; 錯誤替代內容 (Fallback content) 4
5. var context = canvas.getContext('2d'); 渲染環境 (2d, 3d) 5 5
6. 基本功能 6
7. 矩形 context.fillRect(25, 25, 100, 100); context.clearRect(45, 45, 60, 60); context.strokeRect(50, 50, 50, 50); 畫出⼀一個填滿的矩形 清除矩形區域 畫出⼀一個只有框的矩形 (左上⾓角 x 坐標, 左上⾓角 y 坐標, 寬, ⾼高) 7 7
8. context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.lineTo(100, 700); context.lineTo(100, 100); context.closePath(); 開始繪製(產⽣生路路徑) 移動到 100, 100 開始 移動⾄至 700, 700 再移動⾄至 100, 700 最後移動⾄至 100, 100 結束繪製(閉合路路徑) 路路徑 8 8
9. 線條 context.lineWidth = 5; context.strokeStyle = ‘#005588’; context.stroke(); 填滿 context.fillStyle = ‘rgba(2, 100, 300, 0.8)’; context.fill(); 9 9
10. 10 10
11. 弧形 context.arc(300, 300, 200, 0, 1.5 * Math.PI, true); (圓⼼心 x 坐標, 圓⼼心 y 坐標, 半徑, 開啟位置, 結束位置, 是否逆時針) 11 11
12. 12 12
13. ⾙貝茲曲線 context.quadraticCurveTo(25, 100, 50, 100); (控制點 x 坐標, 控制點 y 坐標, 結束位置 x 坐標, 結束位置 y 坐標) context.bezierCurveTo(20, 80, 40, 100, 75, 120); (第⼀一控制點 x 坐標, 第⼀一控制點 y 坐標, 第⼆二控制點 x 坐標, 第⼆二控制點 y 坐標, 結束位置 x 坐標, 結束位置 y 坐標) 13 13
14. 14 14
15. 物件化 new Path2D(); new Path2D(path); new Path2D(d); Path2D object API: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths 代入路路徑 SVG 路路徑 15 15
16. 進階功能 16
17. 漸層 陰影 變形（旋轉、縮放） 合成（剪裁） 17 17
18. DEMO（動畫） 18
19. Reference MDN: Canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API 慕課網: Canvas 繪圖與動畫基礎 http://www.imooc.com/learn/133 19 19
20. 感謝聆聽 20