今天南粤36选7开奖:HTML5 Canvas 起步(1) - 基本概念

2013-05-16 14:38:05 作者:安惠通 來源:互聯網-安惠通

36选7最新开奖 www.vpxqs.com 什么是Canvas

<canvas> 是一個新的 HTML 元素,這個元素在 這里找到一些有趣的 Canvas 示例。

開始使用 Canvas

使用 Canvas 很簡單,與使用其他 HTML 元素一樣,只需要在頁面中添加一個 <canvas> 標簽即可:


復制代碼
代碼如下:

<canvas id="screen" width="400" height="400"></canvas>

當然,這樣只是簡單的創建了一個 Canvas 對象而已,并沒有對它進行任何操作,這個時候的 canvas 元素看上去與 div 元素是沒什么區別的,在頁面上什么都看不出來:)
另外,canvas 元素的大小可以通過 width 與 height 屬性來指定,這與 img 元素有點相似。
Canvas 的核心:Context
前面說到可以通過 JavaScript 來操作 Canvas 對象來進行繪制圖形、合成圖像等操作,這些操作并不是通過 Canvas 對象本身來進行的,而是通過 Canvas 對象的一個方法 getContext 獲取 Canvas 操作上下文來進行。也就是說,在后面我們使用 Canvas 對象的過程中,都是與 Canvas 對象的 Context 打交道,而 Canvas 對象本身可以用來獲取 Canvas 對象的大小等信息。
要獲取 Canvas 對象的 Context 很簡單,直接調用 canvas 元素的 getContext 方法即可,在調用的時候需要傳遞一個 Context 類型參數,目前可以用的并且是唯一可以用的類型值就是 2d:



提示:您可以先修改部分代碼再運行

Firefox 3.0.x 的尷尬

Firefox 3.0.x 雖然支持了 canvas 元素,但是并沒有完全按照規范來實現,規范中的 fillText、measureText 兩個方法在 Firefox 3.0.x 中被幾個 Firefox 特有的方法代替,因此在 Firefox 3.0.x 中使用 Canvas 時需要先 fix 這個幾個方法在不同瀏覽器中的差別。

下面這代碼取自 Mozilla Bespin 項目,它修正了 Firefox 3.0.x 中 Canvas 的 Context 對象與 HTML5 規范不一致的地方:



提示:您可以先修改部分代碼再運行

注意:到 Opera 9.5 為止,Opera 還不支持 HTML5 規范中 Canvas 對象的 fillText 以及其相關方法和屬性。

Hello, Canvas!

在對 Canvas 進行了一些初步了解后,開始來寫我們的第一個 Canvas 程序,聞名的 HelloWorld 的又一個分支“Hello, Canvas”:



提示:您可以先修改部分代碼再運行

運行示例,Canvas 對象所在區域顯示出“Hello, World!”,這正是代碼中 ctx.fillText("Hello, World!", 20, 20); 的作用。

fillText 以及相關屬性

fillText 方法用來在 Canvas 中顯示文字,它可以接受四個參數,其中最后一個是可選的:

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示顯示文字時最大的寬度,可以防止文字溢出,不過我在測試中發現在 Firefox 與 Chomre 中指定了 maxWidth 時也沒有任何效果。

在使用 fillText 方法之前,可以通過設置 Context 的 font 屬性來調整顯示文字的字體,在上面的示例中我使用了“20pt Arial”來作為顯示文字的字體HTML5的Canvas,腳本語言的新舞臺, hred

2. canvas support in Opera, Opera


html5 canvas 簡單畫板實現代碼基于HTML5 audio元素播放聲音jQuery小插件HTML5 常用語法一覽(列舉不支持的屬性)網易微博Web App用HTML5開發的過程介紹HTML5 Canvas 起步(1) - 基本概念HTML5是否真的可以取代FlashHTML5的革新 結構之美HTML5 Canvas 起步(2) - 路徑HTML5 標準將把互聯網視頻扔回到黑暗時代HTML5 對各個標簽的定義與規定:body的介紹html5 兼容IE6結構的實現代碼
?
網站知識 網站推廣 幫助中心 代理專區 會員中心 關于我們
Copyright ? 2018 WEBHAT All Right Reserved. 蜀ICP備08111331號 建站咨詢熱線:028-64460679 15184346008