小編給大家分享一下在HTML5畫(huà)布中繪制文本圖形的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

義烏網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),義烏網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為義烏成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的義烏做網(wǎng)站的公司定做！

  在HTML5中，首先需要使用標(biāo)簽創(chuàng)建畫(huà)布，然后在畫(huà)布中使用javascript的font屬性、fillText()或strokeText()方法來(lái)繪制文本圖形。

HTML5的標(biāo)簽可以用于在網(wǎng)頁(yè)上繪制各種圖形，那么如何繪制文本圖形？本篇文章就給大家介紹在HTML5畫(huà)布中繪制文本圖形的方法，希望對(duì)你們有所幫助。

使用標(biāo)簽創(chuàng)建畫(huà)布

在HTML頁(yè)面上，畫(huà)布是一個(gè)的矩形區(qū)域。它使用canvas標(biāo)簽元素指定；默認(rèn)情況下，畫(huà)布中是沒(méi)有邊框、沒(méi)有內(nèi)容的，它就像一個(gè)容器。但我們可以使用它內(nèi)置的屬性或者css來(lái)添加一些樣式。

例：使用width屬性和height 屬性設(shè)置寬高。

我們還可以使用css來(lái)給畫(huà)布添加邊框、背景顏色，例：

當(dāng)前的瀏覽器不支持HTML5 canvas標(biāo)簽。

如果無(wú)法創(chuàng)建畫(huà)布時(shí)，就會(huì)顯示標(biāo)簽內(nèi)的內(nèi)容，提示當(dāng)前的瀏覽器不支持HTML5 canvas標(biāo)簽。

效果圖：

使用JavaScript在畫(huà)布中繪制文本圖形

首先我們來(lái)看看要在畫(huà)布上繪制文本圖形，需要用到的最重要的屬性和方法：

1、font屬性：定義文本的字體屬性，通過(guò)font屬性可以設(shè)置或返回畫(huà)布上文本內(nèi)容的當(dāng)前字體屬性。它的使用和CSS font屬性相似。

2、fillText()方法：在畫(huà)布上繪制“填充”文本，文本的顏色默認(rèn)為：黑色?；菊Z(yǔ)法為：

fillText(text, x, y, [maxWidth])

3、strokeText()方法：在畫(huà)布上繪制文本（無(wú)填充），也就是說(shuō)繪制文本輪廓圖形；同樣，文本顏色默認(rèn)為：黑色?；菊Z(yǔ)法為：

strokeText(text, x, y, [maxWidth])

參數(shù)說(shuō)明：

text：表示在畫(huà)布上需要輸出的文本圖形。

x，y：相對(duì)于畫(huà)布來(lái)說(shuō)，開(kāi)始繪制文本的 x 坐標(biāo)、y 坐標(biāo)位置

maxWidth：可選參數(shù)，表示允許的最大文本寬度，單位為像素。

我們來(lái)看看其他可能使用到的文本的樣式屬性：

1、textAlign樣式屬性：根據(jù)X軸坐標(biāo)，設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式。

取值有：start（默認(rèn)值，指定文本的開(kāi)始位置）、end（指定文本的結(jié)束位置）、center（指定文本中心的放置位置）、left（左對(duì)齊）、right（右對(duì)齊）。

2、fillStyle屬性：設(shè)置或返回用于填充繪畫(huà)的顏色、漸變或模式。

下面我們來(lái)繪制文本圖形，通過(guò)示例來(lái)看看如何繪制：

例1：使用fillText()

當(dāng)前瀏覽器不支持HTML5 canvas標(biāo)記。

例2：使用strokeText()

例3：添加顏色和中心文本

看完了這篇文章，相信你對(duì)在HTML5畫(huà)布中繪制文本圖形的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！