mozilla
您的搜尋結果

    Canvas 教學文件

    <canvas> 是一個 HTML 元素,我們可以利用程式腳本在這個元素上繪圖 (通常是用 JavaScript)。除了繪圖,我們還可以合成圖片或做一些簡單 (或是 不那麼簡單) 的動畫。右方的影像便是一些運用 <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> 並不困難,但你需要了解基本的 HTMLJavaScript。 舊版瀏覽器不支援 <canvas>,不過基本上現今所有主流的瀏覽器都有支援。預設的畫布大小是 300px * 150px (寬 * 高)。但你也可以透過 CSS 的寬、高屬性自訂。為了在畫布上作畫,我們使用了一個 javascript context 物件來即時繪製圖形。

    教學文件

    也可參考以下連結

    致歉各位貢獻者

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

     

    Document Tags and Contributors

    Contributors to this page: foxbrush, elin
    最近更新: elin,