html5如何實(shí)現(xiàn)圖片上寫字

這篇文章主要介紹了html5如何實(shí)現(xiàn)圖片上寫字，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

望花網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

其實(shí)在canvas里寫字是很簡(jiǎn)單的，他有兩個(gè)原生方法，即strokeText（描邊文字）和fillText（填充文字）——一看就知道他們和strokeRect與fillRect是一伙的啦。

他們不能產(chǎn)生路徑。

他們的使用方法很簡(jiǎn)單，接受3個(gè)參數(shù)，依次是要寫的文本，x坐標(biāo)，y坐標(biāo)，如：

ctx.fillText（'1223',50,50）;

ctx.strokeText（'asdfsadf',150,50）;

當(dāng)然，這個(gè)弱爆了。默認(rèn)畫(huà)出來(lái)都是黑色的字體。

如果想畫(huà)彩色的字體怎么設(shè)置呢？其實(shí)只要像畫(huà)矩形一樣設(shè)置fillStyle和strokeStyle即可：

ctx.fillStyle="#f00";

ctx.strokeStyle="#0f0";

這樣設(shè)置后就可以畫(huà)出彩色字。用添加漸變的方法就能畫(huà)出漸變字。

font設(shè)置

當(dāng)然，很可能我還需要改字體的大小，這跟CSS的方法類似，即context的font屬性，如：

ctx.font = “30px Arial”;

font呢有個(gè)默認(rèn)值，是’10px sans-serif’，而他接受的參數(shù)也必須至少包含兩個(gè)值，即“字體大小 字體名稱”，如果沒(méi)有這兩個(gè)值的任何一個(gè)，那么設(shè)置就不會(huì)生效。就算有很多其他設(shè)置也不行。

font還有些其他設(shè)置，英文版：

font-style:字體樣式，即正常normal，斜體italic，傾斜oblique其中的一個(gè)。很多字體的傾斜和斜體效果是一樣的。例子

font-variant：字體變體。值可能是normal，small-caps中的一個(gè)。大部分字體加了也沒(méi)有變化，因?yàn)闆](méi)有變體。例子

font-weight:字體粗細(xì)，值可以是：

normal

bold

bolder

lighter

100——900

這跟CSS設(shè)置字體粗細(xì)是一樣的——其實(shí)很多字體都只有粗體與正常體兩種狀態(tài)，英文字體可能會(huì)多一點(diǎn)。

另外，他還有一串沒(méi)什么用的值：

caption,icon,menu,message-box,small-caption,status-bar,

他們的作用是讓字體是某種格式呈現(xiàn)，但基本很多字體都不帶有這些格式。他們也只需要選一個(gè)加入font之中即可，但他們可以獨(dú)自一人傳入font,如ctx.font=’menu’，而不像前面的屬性。例子

注意：所有的這些設(shè)置都只是各出一個(gè)值，組成字符串一下加入到font中，不存在單獨(dú)設(shè)置。這么長(zhǎng)的字體串，各個(gè)屬性的排列順序就需要注意了。其實(shí)他們的順序遵循CSS中的順序：

[ [||||]?[ /?]?] | caption | icon | menu | message-box | small-caption | status-bar

注：canvas的字體沒(méi)有l(wèi)ine-height設(shè)置，可以附值，但設(shè)置了也會(huì)無(wú)效。

其中每對(duì)[]里的屬性可以自由切換先后順序，但每個(gè)？前后的屬性可不能換。為了便于理解，我總結(jié)下：

字體樣式，變體，粗細(xì)，的設(shè)置順序可以互換，但他們必須在最前面

字體大小后面必須緊挨著字體名稱，且他們的順序必須在上一條的設(shè)置后面

如果加了caption那一串什么的，必須加在最后

除了caption那一串外，其余的設(shè)置都必須加入字體大小和名稱。

媽逼的好復(fù)雜，看來(lái)我可以以學(xué)好了CSS而驕傲。

下面給出一個(gè)能生效的字體設(shè)置：

字體大小和字體名稱是缺一不可的。最簡(jiǎn)單的：

ctx.font?=?"30px Arial";

ctx.font?=?"small-caps italic 700 30px Arial menu";

而下面這個(gè)就不會(huì)生效：

ctx.font?=?"small-caps italic 30px Arial 700 menu";

因?yàn)樽煮w粗細(xì)設(shè)置放錯(cuò)了位置。

注意：字體設(shè)置只要錯(cuò)了一個(gè)（順序錯(cuò)了？單詞錯(cuò)了？），就全部無(wú)法生效，且不會(huì)報(bào)錯(cuò)。

canvas中的文本對(duì)齊

canvas中的文本對(duì)齊是設(shè)置context.textAlign屬性。其用法如下：

context.textAlign=”center|end|left|right|start”;

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html5如何實(shí)現(xiàn)圖片上寫字”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)站題目：html5如何實(shí)現(xiàn)圖片上寫字
網(wǎng)站地址：http://muchs.cn/article26/ijcccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、微信小程序、做網(wǎng)站、App開(kāi)發(fā)、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)