HTML5Canvas標(biāo)簽中怎么使用收錄

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

創(chuàng)新互聯(lián)公司主營(yíng)烏恰網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,烏恰h5小程序設(shè)計(jì)搭建,烏恰網(wǎng)站營(yíng)銷推廣歡迎烏恰等地區(qū)企業(yè)咨詢

一、基本概念

什么是Canvas

?是一個(gè)新的?HTML?元素，這個(gè)元素在?HTML5 ?中被定義。這個(gè)元素通?？梢员挥脕碓?HTML?頁面中通過?JavaScript?進(jìn)行繪制圖形、合成圖像等等操作，也可以用來做一些動(dòng)畫。當(dāng)然，目前?HTML5?規(guī)范還在草稿階段，正式發(fā)布也許要等到2010年，不過現(xiàn)在已經(jīng)有不少瀏覽器已經(jīng)支持了部分?HTML5?規(guī)范。目前支持?canvas?元素的瀏覽器有?Firefox?3+、Safari?4、Chrome?2.0+?等，因此，在運(yùn)行本頁中的例子時(shí)，請(qǐng)確保你使用的是上述瀏覽器之一。

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

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

開始使用?Canvas

使用?Canvas?很簡(jiǎn)單，與使用其他?HTML?元素一樣，只需要在頁面中添加一個(gè)標(biāo)簽即可：

代碼如下:

當(dāng)然，這樣只是簡(jiǎn)單的創(chuàng)建了一個(gè)?Canvas?對(duì)象而已，并沒有對(duì)它進(jìn)行任何操作，這個(gè)時(shí)候的?canvas?元素看上去與?div?元素是沒什么區(qū)別的，在頁面上什么都看不出來：)

另外，canvas?元素的大小可以通過?width?與?height?屬性來指定，這與?img?元素有點(diǎn)相似。

Canvas?的核心：Context前面說到可以通過?JavaScript?來操作?Canvas?對(duì)象來進(jìn)行繪制圖形、合成圖像等操作，這些操作并不是通過?Canvas?對(duì)象本身來進(jìn)行的，而是通過?Canvas?對(duì)象的一個(gè)方法?getContext?獲取?Canvas?操作上下文來進(jìn)行。也就是說，在后面我們使用?Canvas?對(duì)象的過程中，都是與?Canvas?對(duì)象的?Context?打交道，而?Canvas?對(duì)象本身可以用來獲取?Canvas?對(duì)象的大小等信息。

要獲取?Canvas?對(duì)象的?Context?很簡(jiǎn)單，直接調(diào)用?canvas?元素的?getContext?方法即可，在調(diào)用的時(shí)候需要傳遞一個(gè)?Context?類型參數(shù)，目前可以用的并且是唯一可以用的類型值就是?2d：

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

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

Firefox?3.0.x?的尷尬

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

下面這代碼取自?Mozilla?Bespin ?項(xiàng)目，它修正了?Firefox?3.0.x?中?Canvas?的?Context?對(duì)象與?HTML5?規(guī)范不一致的地方：

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?規(guī)范中?Canvas?對(duì)象的?fillText?以及其相關(guān)方法和屬性。

Hello,?Canvas!

在對(duì)?Canvas?進(jìn)行了一些初步了解后，開始來寫我們的第一個(gè)?Canvas?程序，聞名的?HelloWorld?的又一個(gè)分支“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;

}

})();

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

fillText?以及相關(guān)屬性

fillText?方法用來在?Canvas?中顯示文字，它可以接受四個(gè)參數(shù)，其中最后一個(gè)是可選的：

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

其中?maxWidth?表示顯示文字時(shí)最大的寬度，可以防止文字溢出，不過我在測(cè)試中發(fā)現(xiàn)在?Firefox?與?Chomre?中指定了?maxWidth?時(shí)也沒有任何效果。

在使用?fillText?方法之前，可以通過設(shè)置?Context?的?font?屬性來調(diào)整顯示文字的字體，在上面的示例中我使用了“20pt?Arial”來作為顯示文字的字體，你可以自己設(shè)置不同的值來看具體的效果。

感謝各位的閱讀！關(guān)于“HTML5 Canvas標(biāo)簽中怎么使用收錄”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享文章：HTML5Canvas標(biāo)簽中怎么使用收錄
文章分享：http://bm7419.com/article22/jjcejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、企業(yè)建站、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站營(yíng)銷、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)