HTML5 Canvas標簽中怎么使用收錄

這篇文章給大家分享的是有關HTML5 Canvas標簽中怎么使用收錄的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　一、基本概念

　　什么是Canvas

　　?是一個新的?HTML?元素，這個元素在?HTML5 ?中被定義。這個元素通常可以被用來在?HTML?頁面中通過?JavaScript?進行繪制圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前?HTML5?規范還在草稿階段，正式發布也許要等到2010年，不過現在已經有不少瀏覽器已經支持了部分?HTML5?規范。目前支持?canvas?元素的瀏覽器有?Firefox?3+、Safari?4、Chrome?2.0+?等，因此，在運行本頁中的例子時，請確保你使用的是上述瀏覽器之一。

　　盡管在?Mozilla ?已經有不少關于?Canvas?的教程，我還是決定把自己的學習過程記錄下來。如果覺得我寫的不夠明白，那么你可以在參考資料中找到?Mozilla?網站上?Canvas?教程的鏈接。

　　另外，可以在這里 找到一些有趣的?Canvas?示例

　　開始使用?Canvas

　　使用?Canvas?很簡單，與使用其他?HTML?元素一樣，只需要在頁面中添加一個標簽即可：

　　代碼如下:

　　當然，這樣只是簡單的創建了一個?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：

　　var canvas = document.getElementById("screen");

　　var ctx = canvas.getContext("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?規范不一致的地方：

　　function fixContext(ctx) {

　　// * upgrade Firefox 3.0.x text rendering to HTML 5 standard

　　if (!ctx.fillText && ctx.mozDrawText) {

　　ctx.fillText = function(textToDraw, x, y, maxWidth) {

　　ctx.translate(x, y);

　　ctx.mozTextStyle = ctx.font;

　　ctx.mozDrawText(textToDraw);

　　ctx.translate(-x, -y);

　　};

　　}

　　// * Setup measureText

　　if (!ctx.measureText && ctx.mozMeasureText) {

　　ctx.measureText = function(text) {

　　if (ctx.font) ctx.mozTextStyle = ctx.font;

　　var width = ctx.mozMeasureText(text);

　　return { width: width };

　　};

　　}

　　// * Setup html5MeasureText

　　if (ctx.measureText && !ctx.html5MeasureText) {

　　ctx.html5MeasureText = ctx.measureText;

　　ctx.measureText = function(text) {

　　var textMetrics = ctx.html5MeasureText(text);

　　// fake it 'til you make it

　　textMetrics.ascent = ctx.html5MeasureText("m").width;

　　return textMetrics;

　　};

　　}

　　// * for other browsers, no-op away

　　if (!ctx.fillText) {

　　ctx.fillText = function() {};

　　}

　　if (!ctx.measureText) {

　　ctx.measureText = function() { return 10; };

　　}

　　return ctx;

　　}

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

　　Hello,?Canvas!

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

　　(function() {

　　var canvas = document.getElementById("screen");

　　var ctx = fixContext(canvas.getContext("2d"));

　　ctx.font = "20pt Arial";

　　ctx.fillText("Hello, Canvas!", 20, 20);

　　ctx.fillText("", 20, 50);

　　function fixContext(ctx) {

　　// * upgrade Firefox 3.0.x text rendering to HTML 5 standard

　　if (!ctx.fillText && ctx.mozDrawText) {

　　ctx.fillText = function(textToDraw, x, y, maxWidth) {

　　ctx.translate(x, y);

　　ctx.mozTextStyle = ctx.font;

　　ctx.mozDrawText(textToDraw);

　　ctx.translate(-x, -y);

　　};

　　}

　　// * Setup measureText

　　if (!ctx.measureText && ctx.mozMeasureText) {

　　ctx.measureText = function(text) {

　　if (ctx.font) ctx.mozTextStyle = ctx.font;

　　var width = ctx.mozMeasureText(text);

　　return { width: width };

　　};

　　}

　　// * Setup html5MeasureText

　　if (ctx.measureText && !ctx.html5MeasureText) {

　　ctx.html5MeasureText = ctx.measureText;

　　ctx.measureText = function(text) {

　　var textMetrics = ctx.html5MeasureText(text);

　　// fake it 'til you make it

　　textMetrics.ascent = ctx.html5MeasureText("m").width;

　　return textMetrics;

　　};

　　}

　　// * for other browsers, no-op away

　　if (!ctx.fillText) {

　　ctx.fillText = function() {};

　　}

　　if (!ctx.measureText) {

　　ctx.measureText = function() { return 10; };

　　}

　　return ctx;

　　}

　　})();

　　運行示例，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標簽中怎么使用收錄”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！