Canvas 教學文件
<canvas>
是一個 HTML 元素,我們可以利用程式腳本在這個元素上繪圖(通常是用 JavaScript)。除了繪圖,我們還可以合成圖片或做一些簡單(或是不那麼簡單)的動畫。右方的影像便是一些運用 <canvas> 的例子,接下來我們將會在教學文件中一一說明。
本教學從基礎知識開始,描述如何利用 <canvas> 進行 2D 繪圖。教學中的範例會讓各位清楚瞭解 <canvas> 該如何運用,另外也會提供程式碼範例,讓大家嘗試製作自己的內容。
<canvas>
最早是由 Apple 為 Mac OS X Dashboard 所提出,之後 Safari 和 Google Chrome 也都採用。Gecko 1.8 作基礎的瀏覽器,如 Firefox 1.5 也都提供了支援。<canvas>
元素是 WhatWG Web applications 1.0(也就是 HTML5)規範的一部分,目前所有主流的瀏覽器都已支援。
在開始之前
<canvas>
並不困難,但你需要了解基本的 HTML 與 JavaScript。部分舊版瀏覽器不支援 <canvas>
,不過基本上現今所有主流的瀏覽器都有支援。預設的畫布大小是 300px * 150px(寬 * 高)。但你也可以透過 HTML 寬、高屬性(attribute)自訂。為了在畫布上作畫,我們使用了一個 JavaScript context 物件來即時繪製圖形。
教學文件
參見
- Canvas topic page
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- 31 days of canvas tutorials
- Drawing Graphics with Canvas
- Canvas examples
- HTML5 Tutorial
- Drawing Text Using a Canvas
- Adding Text to Canvas
- Canvas Demos - Games, applications, tools and tutorials
- Canvas Drawing and Animation Application
- interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials
- W3C Standard