initial commit

1 files changed, 69 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/canvas_api/tutorial/index.html b/files/zh-tw/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..15280a881d
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,69 @@
+---
+title: Canvas 教學文件
+slug: Web/API/Canvas_API/Tutorial
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<div class="summary">
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> 是一個 <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/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">不那麼簡單</a>）的動畫。右方的影像便是一些運用 &lt;canvas&gt; 的例子，接下來我們將會在教學文件中一一說明<span style="line-height: inherit;">。</span></p>
+</div>
+
+<p><span class="seoSummary">本教學從基礎知識開始，描述如何利用 &lt;canvas&gt; 進行 2D 繪圖。教學中的範例會讓各位清楚瞭解 &lt;canvas&gt; 該如何運用，另外也會提供程式碼範例，讓大家嘗試製作自己的內容。</span></p>
+
+<p><code>&lt;canvas&gt;</code> 最早是由 Apple 為 Mac OS X Dashboard 所提出，之後 Safari 和 Google Chrome 也都採用。<a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8 作基礎的瀏覽器，如 Firefox 1.5 也都提供了支援。<code>&lt;canvas&gt;</code> 元素是 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a>（也就是 HTML5）規範的一部分，目前所有主流的瀏覽器都已支援。</p>
+
+<h2 id="Before_you_start" name="Before_you_start">在開始之前</h2>
+
+<p><code>&lt;canvas&gt;</code> 並不困難，但你需要了解基本的 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 與 <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>。部分舊版瀏覽器不支援<code> &lt;canvas&gt;，不過基本上現今所有主流的瀏覽器都有支援。</code>預設的畫布大小是 300px * 150px（寬 * 高）。但你也可以透過 HTML 寬、高屬性（{{Glossary("attribute")}}）自訂。為了在畫布上作畫，我們使用了一個 JavaScript context 物件來即時繪製圖形。</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">教學文件</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">基本用途</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">繪製圖形</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">套用樣式與顏色</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">繪製文字</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">使用影像</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">變形效果</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">合成效果</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">基礎動畫</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">進階動畫</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">像素控制</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="Canvas_tutorial/Optimizing_canvas">最佳化 canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a class="external external-icon" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external external-icon" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
+ <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
+ <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
+ <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
+ <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li>
+ <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
+ <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</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 Cheat Sheet with all attributes and methods</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li>
+</ul>
+
+<h2 id="致歉各位貢獻者">致歉各位貢獻者</h2>
+
+<p>由於 2013/6/17 那一週的不幸技術錯誤，所有有關本教學的歷史紀錄，包括過去所有貢獻者的紀錄都遺失了，我們深感抱歉，希望各位可以原諒這一次不幸的意外。</p>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div>
+
+<div> </div>