initial commit

1 files changed, 164 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/canvas/index.html b/files/zh-cn/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..8f9fd88ea9
--- /dev/null
+++ b/files/zh-cn/web/html/element/canvas/index.html
@@ -0,0 +1,164 @@
+---
+title: <canvas>
+slug: Web/HTML/Element/canvas
+tags:
+  - Canvas
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/HTML/Element/canvas
+---
+<p><code>&lt;canvas&gt;</code>元素可被用来通过JavaScript（<a href="/zh-CN/docs/Web/API/Canvas_API">Canvas</a> API 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API">WebGL</a> API）绘制图形及图形动画。</p>
+
+<p>{{HTMLRef}}</p>
+
+<h2 id="属性"><strong>属性</strong></h2>
+
+<p>本元素支持 <a href="https://developer.mozilla.org/en-
+
+US/docs/HTML/Global_attributes">全局属性</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。</dd>
+ <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>通过设置这个属性，来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。</dd>
+</dl>
+
+<h2 id="注意事项"><strong>注意事项</strong></h2>
+
+<h3 id="标签需要闭合">标签需要闭合</h3>
+
+<p>不同于 {{HTMLElement("img")}} 元素,  {{HTMLElement ("canvas")}}元素需要有闭合标签 (<code>&lt;/canvas&gt;</code>).</p>
+
+<h3 id="设置画布canvas的大小">设置画布(canvas)的大小</h3>
+
+<p>直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。</p>
+
+<p>可以使用CSS的width和height以在渲染期间缩放图像以适应样式大小，就像&lt;img&gt;元素一样。如果您发现&lt;canvas&gt;元素中展示的内容变形，您可以通过&lt;canvas&gt;自带的height和width属性进行相关设置，而不要使用CSS。</p>
+
+<h3 id="最大的画布尺寸">最大的画布尺寸</h3>
+
+<p>画布的最大的尺寸取决于浏览器，下表的结论来自别处 (e.g. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">浏览器</th>
+   <th scope="col">最大高度</th>
+   <th scope="col">最大宽度</th>
+   <th scope="col">最大面积</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Chrome</td>
+   <td>32,767 pixels</td>
+   <td>32,767 pixels</td>
+   <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>32,767 pixels</td>
+   <td>32,767 pixels</td>
+   <td>472,907,776 pixels (i.e., 22,528 x 20,992)</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>32,767 pixels</td>
+   <td>32,767 pixels</td>
+   <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td>
+  </tr>
+  <tr>
+   <td>IE</td>
+   <td>8,192 pixels</td>
+   <td>8,192 pixels</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
+  抱歉，您的浏览器不支持canvas元素
+  （这些内容将会在不支持&lt;canvas&gt;元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现）
+&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>使用{{domxref("HTMLCanvasElement.getContext()")}}获得一个绘图上下文并开始绘制</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('示例')}}</p>
+
+<h2 id="可访问性">可访问性</h2>
+
+<p><code>&lt;canvas&gt;</code> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像HTML那样具有语义并能暴露给可访问性工具。以下指南可以帮助您更方便地访问它。</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
+ <li><a href="https://developer.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
+</ul>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas- element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas- element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.elements.canvas")}}</p>
+
+<h2 id="参阅">参阅</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-
+
+sheet.html">Canvas cheat sheet</a></li>
+ <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AudioVi
+
+deo/Conceptual/HTML-canvas-
+
+guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
+</ul>