近日開發移動端h5遇到文字轉的需求，類似長微博生成工具。由於需求簡單，並未採用rasterizehtml.js或html2canvas這類略顯龐大的html轉工具，而是採用canvas原生api直接在畫布上生成。
理一下思路。
canvasrenderingcontext2d物件唯一的列印文字方法filltext(text, x, y [, maxwidth])不支援文字超寬自動換行，即超寬文字被寫出畫布從而不可見。方法的第三個可選引數指定列印文字行的最大寬度，必要時會縮小整個文字行的字型尺寸（真是對文字換行功能毫無貢獻啊）。
所以，必須手動實現文字換行功能。基本思路是迭代文字行的每乙個字元，然後用measuretext(text)方法測量並累加字元寬度。當字元累計寬度即將超寬時，插入換行標誌。當所有文字迭代完成後，就得到了乙個已在所有換行位置插入換行標誌的字串。
遍歷已插入換行標誌的字串時，每遇乙個換行標誌，y軸座標累加行高值一次。
參考：filltext():
measuretext():
htmlcanvaselement.todataurl()方法可匯出畫布影象為base64編碼格式的。api見
生成微博授權URL
目錄2.生成微博授權url介面 3.測試生成微博授權url介面 2.2 新增子路由 oauth urls.py from django.urls import path from import views urlpatterns 2.3 在syl settings.py中新增應用 2.4 在syl ...
生成微博授權url
2.2 新增子路由 oauth urls.py from django.urls import path from import views urlpatterns 2.3 在syl settings.py中新增應用 2.4 在syl urls.py主路由中新增 urlpatterns path o...
關於長博文和微博（短博文）的構造思考
2014 08 20 11 03 家居設計 標籤 部落格 1130 大多玩blog的人們都是以長博文為主，主要是分享自己的所見所聞，或者宣傳自我的產品之類的，但也不缺少一些短博文，就像微博一樣，一兩句話的東西。這類微博形式的文章，在我看來是有點像記事筆記，但是是完全公開的筆記本，這類形式的文章如何嵌...