canvas绘制的文字如何换行
生活随笔
收集整理的這篇文章主要介紹了
canvas绘制的文字如何换行
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
<html><head><title>canvas繪制的文字如何換行</title><style type="text/css"></style>
</head><body><canvas id="canvas" height="400" width="400"></canvas><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script>$(function() {var myAction = {};$.extend(myAction, {drawText: function(t, x, y, w) {var c = document.getElementById("canvas");var context = c.getContext("2d");var chr = t.split("");var temp = "";var row = [];context.font = "20px Arial";context.fillStyle = "black";context.textBaseline = "middle";for (var a = 0; a < chr.length; a++) {if (context.measureText(temp).width < w) {;} else {row.push(temp);temp = "";}temp += chr[a];}row.push(temp);for (var b = 0; b < row.length; b++) {context.fillText(row[b], x, y + (b + 1) * 20);}},initData: function() {myAction.drawText("Hello, World!What a nice day.", 0, 0, 110);}})var init = function() {myAction.initData();}();});</script>
</body></html>
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/xutongbao/p/9924822.html
總結(jié)
以上是生活随笔為你收集整理的canvas绘制的文字如何换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring bean 创建失败的常见原
- 下一篇： MySQL 5.6中如何定位DDL被阻塞