把網頁當畫布揮灑的Canvas 01:基礎圖形繪製 | canvas是什麼
「把網頁當畫布揮灑的Canvas2D」系列文章主要是我記錄吳哲宇老師所開設的「動畫互動網頁特效入門(JS/CANVAS)[1]」這門課的學習過程,輔以網路上的教學資料,綜合撰寫而成的筆記。現在,就踏進Canvas的世界吧!什麼是Canvas?Canvas最早由Apple為MacOSXDashboard所提出,而後Canvas被HTML5標準[2]加以定義為canvas元素,現已支援多數主流瀏覽器。我們可以透過JavaScript串接CanvasAPI[3],獲取Canvas物件的內部方法,藉此在網頁上繪製許多細緻的特效或動畫[4]。其中,Canvas物件又可為2D或3D。簡而言之,我們可以把canvas想像成網頁...
「把網頁當畫布揮灑的 Canvas 2D」系列文章主要是我記錄吳哲宇老師所開設的「動畫互動網頁特效入門(JS/CANVAS)[1]」這門課的學習過程,輔以網路上的教學資料,綜合撰寫而成的筆記。
現在,就踏進 Canvas 的世界吧!
什麼是 Canvas ?Canvas 最早由 Apple 為 Mac OS X Dashboard 所提出,而後 Canvas 被 HTML5 標準[2]加以定義為 canvas 元素,現已支援多數主流瀏覽器。我們可以透過 JavaScript 串接 Canvas API[3] ,獲取 Canvas 物件的內部方法,藉此在網頁上繪製許多細緻的特效或動畫[4]。其中,Canvas 物件又可為 2D 或 3D 。
簡而言之,我們可以把 canvas 想像成網頁中一張可以自由揮灑的畫布元素,透過 JavaScript 獲取 Canvas 物件,並利用物件裡的方法在畫布上繪製線條、形狀與顏色。
瞭解原生 Canvas 後,未來接觸特效函式庫如 PixiJS[5] 、 PhaserJs[6] 或 p5JS[7] 將更容易上手。
使用 CanvasHTML 的 canvas 元素在 HTML 中加入 canvas 元素,預設的畫布寬高為 300px x 150px。我們可以透過 HTML 的寬高屬性自訂大小,或者,利用 CSS 指定寬高也是可行的(但內部影像也會跟著縮放)。
部分舊版瀏覽器如 IE 9 並不支援 canvas 。我們可以在 canvas 內加入一段替代文字或靜態圖片,作為瀏覽器不支援時的替代內容。
1234567<canvas id="my-canvas" width="200" height="100"> 你的瀏覽起不支援 canvas </canvas><canvas id="my-canvas-2" width="200" height="100"> <img src="./images/altImg.png" width="200" height="100"></canvas>
JavaScript 獲取 Canv...