马黑黑 发表于 2022-3-3 18:23
解释：
在画布上作画，每一次都要获得画布操作句柄、2d画笔句柄，所以，下面这几句中，
原来字体大小的px和长度里用的px是一回事，从来没注意这个{:4_173:}
这个双循环每次都觉得挺难的。
写得这么详细。黑黑辛苦了{:4_187:}
红影 发表于 2022-3-3 21:30
原来字体大小的px和长度里用的px是一回事，从来没注意这个
这个双循环每次都觉得挺难的。
写 ...
关于双循环：外层每循环一次，内层就完整循环一遍。
例如，外循环如果循环3遍，内循环设定为循环5遍，那么，内循环总共要循环 3*5 = 15 遍
本帖最后由 马黑黑 于 2022-3-3 22:53 编辑 <br /><br /><canvas id="txtCv1" width="400" height="400" style="border:1px solid;">浏览器老</canvas>
<script>
var canv1 = document.getElementById('txtCv1');
var ctx = canv1.getContext('2d');
ctx.font = "bold 60px 宋体";
var grd = ctx.createLinearGradient(0,0,0,280);
grd.addColorStop(0,"green");
grd.addColorStop(0.2,"red");
grd.addColorStop(0.4,"tan");
grd.addColorStop(0.6,"blue");
grd.addColorStop(0.8,"olive");
grd.addColorStop(1,"tomato");
ctx.fillStyle = grd;
var txtStr = "鋤禾日當午，汗滴禾下土。誰知盤中餐，粒粒皆辛苦。";
var ttWidth = ctx.measureText(txtStr).width; //获得文本占位总长度
if(ttWidth > canv1.width){ //若文本长度大于画布长度
var txtAr = txtStr.split(""); //将文本逐字放入数组
var cWidth = ttWidth / txtAr.length; //计算单字长度
//计算每行能装多少个字：cNum
var cNum = Math.floor(canv1.width * 0.9 / cWidth);
//计算需要多少行：lNum
var lNum = Math.ceil(txtAr.length / cNum);
for(j=0; j<lNum; j++){
var tmpStr = "";
for(k=0; k<cNum; k++){
if(j*cNum+k < txtAr.length) tmpStr += txtAr;//console.log(j*cNum+k);
}
ctx.fillText(tmpStr,20,j*70+70);
}
} else {
ctx.fillText(txtStr,20,70);
}
</script>
比较一下 23# 和 二楼演示的效果，宽度因为字体修饰的关系，23# 单字的占位宽度实际上比二楼的多了一些尺寸
之所以出现这样的问题，仅仅在于字体的变化：2楼用微软雅黑，23#用宋体。
估计如果给文字设置阴影，单字的占位也会发生变化。
大猫咪 发表于 2022-3-3 21:28
嗯嗯
不过我就算知道了，也经常忘{:4_173:}
马黑黑 发表于 2022-3-3 21:29
var cWidth = ttWidth / txtAr.length;
单字长度就是单一字符个体所占的宽度像素值。我们已经知道有多 ...
比较搅的是，先用字符宽度计算每行多少个汉字，然后又用个数的长度相除得到行数。
也就是宽度和数量来回折腾被折腾迷糊了。最主要split() 方法一下子没理解，“我们获取数组 txtAr 的长度实际上就等于字符串 txtStr 的字符个数，它将参与到后续的计算中。”
马黑黑 发表于 2022-3-3 22:55
比较一下 23# 和 二楼演示的效果，宽度因为字体修饰的关系，23# 单字的占位宽度实际上比二楼的多了一些尺寸
渐变的修饰也会引起单个字体长度的变化？
马黑黑 发表于 2022-3-3 23:02
之所以出现这样的问题，仅仅在于字体的变化：2楼用微软雅黑，23#用宋体。
估计如果给文字设置阴影，单字 ...
哦，不同的字体风格也有影响的啊。
红影 发表于 2022-3-4 10:36
哦，不同的字体风格也有影响的啊。
是的。文字各异，设计的标准也有所不同。大体上，微软雅黑是等宽的字体，但也不纯粹，纯粹的等宽字体是win7及其低版本Windows默认使用的fixdays字体。
红影 发表于 2022-3-4 10:35
渐变的修饰也会引起单个字体长度的变化？
这个不会，是字体问题
马黑黑 发表于 2022-3-4 13:50
是的。文字各异，设计的标准也有所不同。大体上，微软雅黑是等宽的字体，但也不纯粹，纯粹的等宽字体是wi ...
涉及到字体，感觉要算准还挺不容易的。
马黑黑 发表于 2022-3-4 13:50
这个不会，是字体问题
嗯嗯，知道了。
红影 发表于 2022-3-4 21:46
涉及到字体，感觉要算准还挺不容易的。
所以有这个measureText方法
马黑黑 发表于 2022-3-4 21:47
所以有这个measureText方法
原来所有的命令都是应需而出现的{:4_204:}
红影 发表于 2022-3-4 22:39
原来所有的命令都是应需而出现的
那必须的
马黑黑 发表于 2022-3-4 23:31
那必须的
要记住这么多命令很不容易的。
红影 发表于 2022-3-5 10:00
要记住这么多命令很不容易的。
所以要理解，理解之后基本不存在记忆问题
马黑黑 发表于 2022-3-5 21:42
所以要理解，理解之后基本不存在记忆问题
理解了，也还是需要记住命令是什么的。
红影 发表于 2022-3-5 22:41
理解了，也还是需要记住命令是什么的。
理解了基本不用去背