---
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>