Get to know MDN better
此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
本教學描述如何使用 <canvas> 元素來繪製 WebGL 圖形，並從基礎開始。所提供的範例應能讓你清楚了解 WebGL 可以做什麼，並提供程式碼片段，讓你開始建立自己的內容。
WebGL 讓 web 內容能夠使用基於 OpenGL ES 2.0 的 API，在支援的瀏覽器中於 HTML <canvas> 內執行 3D 算繪，而無需使用外掛。WebGL 程式由使用 JavaScript 撰寫的控制程式碼，以及在電腦圖形處理器（GPU）上執行的特效程式碼（著色器程式碼）所組成。WebGL 元素可以與其他 HTML 元素混合，並與頁面或是頁面背景的其他部分進行合成。
使用 <canvas> 元素並不難，但你需要具備 HTML 和 JavaScript 的基礎理解。部分舊版瀏覽器不支援 <canvas> 元素和 WebGL，但所有主要瀏覽器的近期版本皆有支援。為了在 canvas 上繪製圖形，我們使用 JavaScript 上下文物件來即時建立圖形。
如何設定 WebGL 上下文。
將 2D 內容加入 WebGL 上下文如何使用 WebGL 算繪簡單的平面形狀。
在 WebGL 中使用著色器上色示範如何使用著色器為形狀上色。
使用 WebGL 製作物件動畫展示如何旋轉和平移物件以建立簡單的動畫。
使用 WebGL 建立 3D 物件展示如何建立 3D 物件（在此例中為立方體）並製作動畫。
在 WebGL 中使用紋理示範如何將紋理映射到物件的表面上。
WebGL 中的光照如何在你的 WebGL 上下文中模擬光照效果。
在 WebGL 中製作紋理動畫展示如何製作紋理動畫；在此例中，是將 Ogg 視訊映射到旋轉立方體的表面上。
This page was last modified on 2026年2月27日 by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.