Canvas 教學文件

  • 版本網址代稱: Web/Guide/HTML/Canvas_tutorial
  • 版本標題: Canvas tutorial
  • 版本 ID: 438937
  • 建立日期:
  • 建立者: foxbrush
  • Is current revision?
  • 回應

版本內容

<canvas> 是一個 HTML 元素,我們可以利用程式碼腳本在這個元素上繪圖 (通常是用 JavaScript),例如除了繪圖,我們還可以排列圖片或做一些簡單(以及 不那麼簡單) 的動畫。右方的影像便是一些利用<canvas>的例子,接下來我們將會一一看到如何使用<canvas> 的教學。

<canvas> 最早是由Apple為Mac OS X Dashboard 所提出,之後Safari和Google Chrome也都採用。 Gecko 1.8作基礎的瀏覽器,如Firefox 1.5也支援<canvas>。<canvas> 元素是WhatWG Web applications 1.0 (也就是HTML5)規範的一部分。

 

本教學描述如何利用<canvas>進行2D繪圖,各個範例會讓各位清楚知道可以用<canvas>做甚麼事,另外也會提供程式碼範例,讓大家可以嘗試製作自己的東西。

在開始之前

<canvas>並不困難,但你需要了解基本的HTML 與JavaScript。 舊版瀏覽器不支援<canvas>,不過基本上現今所有主流的瀏覽器都有支援。

本教學

See also

給各位貢獻者

由於2013/6/17那一週的不幸技術錯誤,所有有關本教學的歷史紀錄,包括過去所有貢獻者的紀錄都遺失了,我們深感抱歉,希望各位可以原諒這一次不幸的意外。

{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
 

版本來源

<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="width: 200px; height: 450px; float: right;" /></a></p>
<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>&nbsp;元素,我們可以利用程式碼腳本在這個元素上繪圖 (通常是用&nbsp;<a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>),例如除了繪圖,我們還可以排列圖片或做一些簡單(以及&nbsp;<a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">不那麼簡單</a>) 的動畫。右方的影像便是一些利用&lt;canvas&gt;的例子,接下來我們將會一一看到如何使用&lt;canvas&gt; 的<span style="line-height: inherit;">教學。</span></p>
<p><code>&lt;canvas&gt;</code>&nbsp;最早是由Apple為Mac OS X Dashboard 所提出,之後Safari和Google Chrome也都採用。&nbsp;<a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8作基礎的瀏覽器,如Firefox 1.5也支援&lt;canvas&gt;。<code>&lt;canvas&gt;</code>&nbsp;元素是<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a>&nbsp;(也就是HTML5)規範的一部分。</p>
<p>&nbsp;</p>
<p><span class="seoSummary">本教學描述如何利用&lt;canvas&gt;進行2D繪圖,各個範例會讓各位清楚知道可以用&lt;canvas&gt;做甚麼事,另外也會提供程式碼範例,讓大家可以嘗試</span><span style="line-height: inherit;">製作自己的東西。</span></p>
<h2 id="Before_you_start" name="Before_you_start">在開始之前</h2>
<p>&lt;canvas&gt;並不困難,但你需要了解基本的<a href="/en-US/docs/HTML" title="HTML">HTML</a>&nbsp;與<a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>。&nbsp;舊版瀏覽器不支援<code>&lt;canvas&gt;,不過基本上現今所有主流的瀏覽器都有支援。</code></p>
<h2 id="In_this_tutorial" name="In_this_tutorial">本教學</h2>
<ul>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">基本用途</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">繪畫圖型</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">使用影像</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">套用樣式與顏色</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">變形效果</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">排列組合</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">基礎動畫</a></li>
  <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">最佳化canvas</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</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="A_note_to_contributors">給各位貢獻者</h2>
<p>由於2013/6/17那一週的不幸技術錯誤,所有有關本教學的歷史紀錄,包括過去所有貢獻者的紀錄都遺失了,我們深感抱歉,希望各位可以原諒這一次不幸的意外。</p>
<div>
  {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div>
<div>
  &nbsp;</div>
Revert to this revision