Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revision 360695 of Canvas

  • Revision slug: HTML/Canvas
  • Revision title: Canvas
  • Revision id: 360695
  • Created:
  • Creator: LinusYu
  • Is current revision? No
  • Comment Translate from English to Chinese.

Revision Content

{{translationinprogress()}}

<canvas> 是一个新的 HTML 元素,可使用脚本(通常是JavaScript)来绘制图形。例如:画图,做图像合成,甚至是动画。

Mozilla 的应用从 Gecko 1.8 (也就是 Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的,用于 OS X Dashboard 和 Safari。Internet Explorer 本身是不支持 <canvas> 的,但是可以引入 Google 的 Explorer Canvas 项目中的脚本来获得有效的支持。Opera 9 也支持 <canvas>

<canvas>元素也可被WebGL用作网页上3D图形硬件加速

文档

规范
<canvas>元素是
The <canvas> element is part of the WhatWG Web applications 1.0 specification, also known as HTML 5.
Canvas 教程
涵盖 <canvas> 的基本与进阶用法的综合性教程。
代码片段:Canvas
一些面向开发者的应用 <canvas> 代码片段。
Canvas 案例
一些 <canvas> 应用案例.
在canvas上绘制DOM对象
如何在canvas上绘制DOM内容,如HTML元素。
A basic raycaster
A demo of ray-tracing animation using canvas.
Canvas DOM 接口
Gecko中的Canvas DOM接口。
 

查看全部...

社区

* 查看 Mozilla 社区...

{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}

资源

  • libCanvas 是一个强大且轻量的 canvas 框架
  • Processing.js is a port of the Processing visualization language
  • EaselJS 是一个有着类似Flash API的库
  • PlotKit 是一个字符和图形库
  • Rekapi is an animation keyframing API for Canvas
  • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
  • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
{{ HTML5ArticleTOC() }}

Revision Source

<div>
  {{translationinprogress()}}</div>
<p><strong><code>&lt;canvas&gt;</code></strong> 是一个新的 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 元素,可使用脚本(通常是<a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>)来绘制图形。例如:画图,做图像合成,甚至是动画。</p>
<p>Mozilla 的应用从 Gecko 1.8 (也就是 <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>) 开始支持 <code>&lt;canvas&gt;</code>。它首先是由 Apple 引入的,用于 OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> 和 Safari。Internet Explorer 本身是不支持 <code>&lt;canvas&gt;</code> 的,但是可以引入 Google 的 <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> 项目中的脚本来获得有效的支持。Opera 9 也支持 <code>&lt;canvas&gt;</code>。</p>
<p><span class="short_text" id="result_box" lang="zh-CN"><span>&lt;canvas&gt;元素</span><span>也可被</span></span><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a><span class="short_text" id="result_box" lang="zh-CN"><span>用作网页上</span><span>的</span><span>3D图形</span></span><span class="short_text" id="result_box" lang="zh-CN"><span>硬件加速</span></span><span class="short_text" id="result_box" lang="zh-CN"><span>。</span></span></p>
<table class="topicpage-table">
  <tbody>
    <tr>
      <td>
        <h2 class="Documentation" id="Documentation" name="Documentation">文档</h2>
        <dl>
          <dt>
            <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">规范</a></dt>
          <dd>
            <code>&lt;canvas&gt;元素是</code></dd>
          <dd>
            The <code>&lt;canvas&gt;</code> element is part of the WhatWG Web applications 1.0 specification, also known as HTML 5.</dd>
          <dt>
            <a href="/zh-CN/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas 教程</a></dt>
          <dd>
            涵盖 <code>&lt;canvas&gt; </code>的基本与进阶用法的综合性教程。</dd>
          <dt>
            <a href="/en-US/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">代码片段:Canvas</a></dt>
          <dd>
            <small>一些面向开发者的应用 </small><small><code>&lt;canvas&gt; </code></small><small>代码片段。</small></dd>
          <dt>
            <a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Canvas 案例</a></dt>
          <dd>
            <small>一些 <code>&lt;canvas&gt;</code> 应用案例.</small></dd>
          <dt>
            <a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">在canvas上绘制DOM对象</a></dt>
          <dd>
            如何在canvas上绘制DOM内容,如HTML元素。</dd>
          <dt>
            <a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">A basic raycaster</a></dt>
          <dd>
            A demo of ray-tracing animation using canvas.</dd>
          <dt>
            <a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Canvas DOM 接口</a></dt>
          <dd>
            Gecko中的Canvas DOM接口。</dd>
          <dd>
            &nbsp;</dd>
        </dl>
        <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">查看全部...</a></span></p>
      </td>
      <td>
        <h2 class="Community" id=".E7.A4.BE.E5.8C.BA">社区</h2>
        <p>* 查看 Mozilla 社区...</p>
        <div>
          {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</div>
        <ul>
          <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></li>
        </ul>
        <h2 class="Resources" id="Resources" name="Resources">资源</h2>
        <ul>
          <li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li>
          <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas 图表</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
        </ul>
        <h2 class="Libraries" id="Libraries" name="Libraries">库</h2>
        <ul>
          <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> 是一个强大且轻量的 canvas 框架</li>
          <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> is a port of the Processing visualization language</li>
          <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> 是一个有着类似Flash API的库</li>
          <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> 是一个字符和图形库</li>
          <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation keyframing API for Canvas</li>
          <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li>
          <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li>
        </ul>
        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关主题</h2>
        <ul>
          <li><a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<div>
  {{ HTML5ArticleTOC() }}</div>
Revert to this revision