真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

HTML5Canvas如何繪制文本

這篇文章主要介紹HTML5 Canvas如何繪制文本,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)專注于平果網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供平果營銷型網(wǎng)站建設(shè),平果網(wǎng)站制作、平果網(wǎng)頁設(shè)計(jì)、平果網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造平果網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供平果網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

HTML5 Canvas 繪制文本

HTML5 Canvas 可以使用各種字體,大小和顏色在HTML5畫布上繪制文本,文本的外觀由這些2D Context font屬性控制,要繪制文本,請使用fillText()或strokeText()功能。

在線示例

可以使用各種字體,大小和顏色在HTML5畫布上繪制文本。

文本的外觀由這些2D Context font屬性控制。此外,您需要根據(jù)要繪制填充文本還是描邊文本來設(shè)置fillStyle或strokeStyle2D Context屬性。

要繪制文本,請使用fillText()或strokeText()功能

這是一個(gè)簡單的代碼示例:

示例

HTML5?Canvas?not?supported

var?canvas=?document.getElementById("ex1");

var?context?=?canvas.getContext("2d");

context.font?=?"36px?Verdana";

context.fillStyle?=?"#000000";

context.fillText("HTML5?Canvas?Text",?50,?50);

context.font=?"normal?36px?Arial";

context.strokeStyle?=?"#000000";

context.strokeText("HTML5?Canvas?Text",?50,?90);

測試看看 ?/?

這是在畫布上繪制時(shí)的結(jié)果:HTML5 Canvas not supported

字體和樣式

在HTML5畫布上繪制文本時(shí),必須設(shè)置要使用的字體。這是通過設(shè)置2D上下文font屬性的值來完成的。此屬性是具有CSS兼容值的字符串,其格式為:[font?style][font?weight][font?size][font?face]

例如context.font?=?"normal?normal?20px?Verdana";

您可以為字體字符串的每個(gè)部分設(shè)置以下值:font stylenormal

italic

oblique

inherit

font weightnormal

bold

bolder

lighter

auto

inherit

100

200

300

400

500

600

700

800

900

font size以像素為單位的大小,例如12px,20px等

font face字體, e.g. verdana, arial, serif, sans-serif, cursive, fantasy, monospace etc.

請注意,并非每個(gè)瀏覽器都支持所有值。在依賴它們之前,您將必須測試計(jì)劃使用的值。

這是另一個(gè)示例:"italic?bold?36px?Arial"

繪圖文字

如前所述,在HTML5畫布上繪制文本時(shí),您可以繪制填充文本或輪廓文本。您可以使用2D上下文函數(shù)fillText()和進(jìn)行操作strokeText()。這些函數(shù)的定義如下:fillText?(textString,?x,?y?[,maxWidth]);

strokeText?(textString,?x,?y?[,maxWidth]);

該textString參數(shù)是繪制文本。

在x和y代表在文字中得出的位置。該x 參數(shù)是文本開始的地方。該y參數(shù)是文本垂直放置的位置,但是確切的表示方式取決于文本基線。文本基線將在后面的部分中介紹。

該maxWidth文本被覆蓋在下面的部分。

這是一個(gè)代碼示例:context.font=?"36px?Verdana";

context.fillStyle?=?"#000000";

context.fillText("HTML5?Canvas?Text",?50,?50);

文字最大寬度

可選maxWidth參數(shù)告訴畫布,文本在水平方向上不能比給定參數(shù)值占用更多空間。如果文字太寬而無法容納 maxWidth,則文字的寬度將被壓縮。它沒有被切斷。這是一個(gè)使用和不使用繪制相同文本的代碼示例maxWidth:context.font=?"36px?Verdana";

context.fillStyle?=?"#000000";

context.fillText("HTML5?Canvas?Text",?50,?50);

context.fillText("HTML5?Canvas?Text",?50,?100,?200);

這是在HTML5畫布上繪制時(shí)這兩個(gè)文本的外觀:HTML5 Canvas not supported

如您所見,第二個(gè)文本的寬度被壓縮以適合maxWidth 200個(gè)像素。

文字顏色

像其他任何形狀一樣,使用2D上下文 的fillStyle和 strokeStyle屬性設(shè)置填充或描邊文本的顏色。在這里,我不會更詳細(xì)地介紹這些屬性。有關(guān) 更多詳細(xì)信息,請參見描邊和填充。

測量文字寬度

2D上下文對象具有可以測量文本像素寬度的功能。它無法測量高度。該函數(shù)稱為measureText()。這是一個(gè)代碼示例:var?textMetrics?=?context.measureText("measure?this");

var?width?=?textMetrics.width;

測量文本的寬度可用于計(jì)算文本字符串是否適合特定空間等。

文字基線

文本基線確定如何解釋和 的y參數(shù)。換句話說,垂直放置文本的位置以及該位置的解釋方式。請注意,瀏覽器在解釋此屬性的方式上也可能會有細(xì)微的差異。 fillText()strokeText()

使用textBaseline2D上下文的屬性設(shè)置文本基線。以下是它可以采用的值及其含義:top文本根據(jù)文本中最高字形的頂部對齊

hanging文本根據(jù)似乎懸掛的行對齊。這幾乎與top相同,并且在許多情況下您看不到差異。

middle文本根據(jù)文本的中間對齊。

alphabetic垂直定向字形的底部,例如拉丁字母等西方字母

ideographic水平定向字形的底部。

bottom文本是根據(jù)文本中字形的底部對齊的,該字形在文本中向下延伸最低。

這是一個(gè)示例,該示例y對所有文本使用相同的值(75)繪制文本,但對所繪制的每個(gè)文本使用不同的基線。將畫一條線y=75,向您顯示如何圍繞該y值設(shè)置文本基線。HTML5 Canvas not supported

下面是生成上述圖形的代碼:context.stokeStyle?=?"#000000";

context.lineWidth=?1;

context.beginPath();

context.moveTo(0,?75);

context.lineTo(500,?75);

context.stroke();

context.closePath();

context.font=?"16px?Verdana";

context.fillStyle?=?"#000000";

context.textBaseline?=?"top";

context.fillText("top",?0,?75);

context.textBaseline?=?"hanging";

context.fillText("hanging",?40,?75);

context.textBaseline?=?"middle";

context.fillText("middle",?120,?75);

context.textBaseline?=?"alphabetic";

context.fillText("alphabetic",?200,?75);

context.textBaseline?=?"ideographic";

context.fillText("ideographic",?300,?75);

context.textBaseline?=?"bottom";

context.fillText("bottom-glyph",?400,?75);

文字對齊

2D上下文textAlign屬性定義了繪制時(shí)文本如何水平對齊。換句話說,該textAlign屬性定義了x繪制文本時(shí)的坐標(biāo)。start緊隨該x位置之后繪制文本

left緊隨x位置之后才繪制文本,例如start。

center文本的中心位于一個(gè)x位置。

end文本的結(jié)尾位于x位置。

right文本的右邊緣位于x位置,例如end。

以下是一些示例,顯示了該textAlign屬性的工作方式。垂直線在處繪制x = 250。所有文本也都繪制有x = 250,但是textAlign屬性的值不同。

這是圖形的代碼示例:

示例

HTML5?Canvas?not?supported

var?canvas=?document.getElementById("ex4");

var?context?=?canvas.getContext("2d");

context.stokeStyle?=?"#000000";

context.lineWidth=?1;

context.beginPath();

context.moveTo(?250,?0);

context.lineTo(?250,?250);

context.stroke();

context.closePath();

context.font=?"16px?Verdana";

context.fillStyle?=?"#000000";

context.textAlign?=?"center";

context.fillText("center",?250,?20);

context.textAlign?=?"start";

context.fillText("start",?250,?40);

context.textAlign?=?"end";

context.fillText("end",?250,?60);

context.textAlign?=?"left";

context.fillText("left",?250,?80);

context.textAlign?=?"right";

context.fillText("right",?250,?100);

以上是“HTML5 Canvas如何繪制文本”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


當(dāng)前文章:HTML5Canvas如何繪制文本
文章分享:http://weahome.cn/article/pjgedg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部