1 files changed, 49 insertions, 0 deletions
diff --git a/files/zh-tw/web/guide/graphics/index.html b/files/zh-tw/web/guide/graphics/index.html
new file mode 100644
index 0000000000..224757c138
--- /dev/null
+++ b/files/zh-tw/web/guide/graphics/index.html
@@ -0,0 +1,49 @@
+---
+title: 網頁上的圖像
+slug: Web/Guide/Graphics
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">現代網站或應用程式通常都配有圖像。</span>我們可以很容易地使用{{HTMLElement("img")}}元素呈現靜態圖像 , 或藉由使用{{cssxref("background-image")}} 設定HTML的背景元素性質。你常會想要建立動態圖像或在事後操縱圖像。<span class="seoSummary">這些文章將讓你知道如何達成這些效果。</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D 圖像</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd><em>{{HTMLElement("canvas")}} 元素提供 </em><em>APIs讓開發者透過Javascript來繪製2D圖像.</em></dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><em>可縮放向量圖像(SVG) 讓你可以使用直線，曲線以及其他幾何圖形來編寫圖像。避免使用點陣圖像(bitmaps)，你可以創造出適合任何大小的圖像。</em></dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">觀看全部...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D 圖像</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd><em>一份WebGL初始指南，網頁用3D 圖像 API。這項技術讓你在網頁內容使用standard OpenGL ES。</em></dd>
+</dl>
+
+<h2 id="影片">影片</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">使用 HTML5 影音</a></dt>
+ <dd><em>在 HTML 檔案嵌入影片及控制播放。</em></dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd><em>在WebRTC 中 RTC 是 Real-Time Communications 的簡稱，讓瀏覽器客戶端之間(peers)串流影片/音效檔案與數據分享的技術。</em></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>