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

望花網站制作公司哪家好，找創新互聯！從網頁設計、網站建設、微信開發、APP開發、成都響應式網站建設公司等網站項目制作，到程序開發，運營維護。創新互聯于2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯。

其實在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如何實現圖片上寫字”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

網站題目：html5如何實現圖片上寫字
網站地址：http://www.2m8n56k.cn/article26/ijcccg.html

成都網站建設公司_創新互聯，為您提供網站收錄、微信小程序、做網站、App開發、網站排名、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯