initial commit

1 files changed, 54 insertions, 0 deletions

diff --git a/files/zh-cn/web/guide/graphics/index.html b/files/zh-cn/web/guide/graphics/index.html
new file mode 100644
index 0000000000..686f6ff1eb
--- /dev/null
+++ b/files/zh-cn/web/guide/graphics/index.html
@@ -0,0 +1,54 @@
+---
+title: Web 图形开发
+slug: Web/Guide/Graphics
+tags:
+  - 3D
+  - Canvas
+  - HTML5
+  - SVG
+  - WebGL
+  - WebRTC
+  - 图像
+  - 图形
+translation_of: Web/Guide/Graphics
+---
+<p>现代网站和应用需要呈现大量图片。 展示静态签 {{HTMLElement("img")}}，也可以采用 CSS 样式中的 {{cssxref("background-image")}} 属性。与此同时，你也能绘制出动态图像，或者是对图像进行巧妙处理。 这些文章可以帮助你了解如何做到这些事情。</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="2D_图像">2D 图像</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/HTML/Canvas">Canvas</a></dt>
+ <dd>{{HTMLElement("canvas")}}提供了一些使用 JavaScript 来绘制 2D 图像的接口</dd>
+ <dt><a href="/zh-CN/docs/SVG">SVG</a></dt>
+ <dd>可缩放矢量图形 (SVG) 帮助你使用直线，曲线，和其他的几何图形来生成（渲染）图像。通过使用矢量图形，你能够画出任意拉伸也不失真的图像。</dd>
+</dl>
+
+<p><a href="/zh-CN/docs/tag/Graphics">查看全部...</a></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="/zh-CN/docs/Web/WebGL">WebGL</a></dt>
+ <dd>开启 WebGL（即 Web 3D 图像 API）历程的指南。这项技术可帮助你在 Web 内容中使用标准的 OpenGL ES。</dd>
+</dl>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="视频" style="line-height: 30px; font-size: 2.14285714285714rem;">视频</h2>
+
+<div></div>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">使用 HTML5 音频（audio）和 视频（video）</a></dt>
+ <dd>在网页中嵌入视频/音频并控制其播放。</dd>
+ <dt><a href="/zh-CN/docs/WebRTC">WebRTC</a></dt>
+ <dd>WebRTC 中的 RTC 代表实时通讯技术，这一技术允许音频/视频数据流在对等的浏览器客户端之间共享。</dd>
+</dl>
+</div>
+</div>
+</div>
+</div>