html5如何實現圖片上寫字

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

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

　　他們不能產生路徑。

　　他們的使用方法很簡單，接受3個參數，依次是要寫的文本，x坐標，y坐標，如：

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

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

　　當然，這個弱爆了。默認畫出來都是黑色的字體。

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

　　ctx.fillStyle="#f00";

　　ctx.strokeStyle="#0f0";

　　這樣設置后就可以畫出彩色字。用添加漸變的方法就能畫出漸變字。

　　font設置

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

　　ctx.font = “30px Arial”;

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

　　font還有些其他設置，英文版：

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

　　font-variant：字體變體。值可能是normal，small-caps中的一個。大部分字體加了也沒有變化，因為沒有變體。例子

　　font-weight:字體粗細，值可以是：

　　normal

　　bold

　　bolder

　　lighter

　　100——900

　　這跟CSS設置字體粗細是一樣的——其實很多字體都只有粗體與正常體兩種狀態，英文字體可能會多一點。

　　另外，他還有一串沒什么用的值：

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

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

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

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

　　注：canvas的字體沒有line-height設置，可以附值，但設置了也會無效。

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

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

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

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

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

　　媽逼的好復雜，看來我可以以學好了CSS而驕傲。

　　下面給出一個能生效的字體設置：

　　字體大小和字體名稱是缺一不可的。最簡單的：

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

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

　　而下面這個就不會生效：

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

　　因為字體粗細設置放錯了位置。

　　注意：字體設置只要錯了一個（順序錯了？單詞錯了？），就全部無法生效，且不會報錯。

　　canvas中的文本對齊

　　canvas中的文本對齊是設置context.textAlign屬性。其用法如下：

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“html5如何實現圖片上寫字”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!