canvas画布: 多行文本逐句逐字输出
<style>#papa { margin: auto; width: 720px; height: 460px; display:grid; place-items: center; position: relative; }
#canv { position: absolute; border: 1px solid; }
</style>
<div id="papa">
<canvas id="canv" width="320" height="260"></canvas>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let txtAr = ['荆溪白石出，', '天寒红叶稀。', '山路元无雨，', '空翠湿人衣。'];
let lineNow = 0, lineHeight = 60, charIdx = 0; //行、行高（建议略大于字号）、字符索引
let linear = ctx.createLinearGradient(0, 0, w, h);
linear.addColorStop(0, 'red');
linear.addColorStop(0.3, 'olive');
linear.addColorStop(0.7, 'darkgreen');
linear.addColorStop(1, 'orange');
(function drawText() {
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = linear;
ctx.font = 'bold 50px snas-serif';
for(let k = 0; k < lineNow; k ++) {
ctx.strokeText(txtAr, 20, lineHeight * k + lineHeight);
}
let txtstr = txtAr.substring(0, charIdx);
ctx.strokeText(txtstr, 20, lineHeight * lineNow + lineHeight);
charIdx ++;
if(charIdx > txtAr.length) {
lineNow += 1;
charIdx = 0;
}
if(lineNow > txtAr.length - 1) lineNow = 0;
setTimeout(drawText, 500);
})();
</script>
代码（使用时应根据需要修改相应的东东）：
<style>
#papa { margin: auto; width: 720px; height: 460px; display:grid; place-items: center; position: relative; }
#canv { position: absolute; border: 1px solid; }
</style>
<div id="papa">
<canvas id="canv" width="320" height="260"></canvas>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let txtAr = ['荆溪白石出，', '天寒红叶稀。', '山路元无雨，', '空翠湿人衣。'];
let lineNow = 0, lineHeight = 60, charIdx = 0; //行、行高（建议略大于字号）、字符索引
let linear = ctx.createLinearGradient(0, 0, w, h);
linear.addColorStop(0, 'red');
linear.addColorStop(0.3, 'olive');
linear.addColorStop(0.7, 'darkgreen');
linear.addColorStop(1, 'orange');
(function drawText() {
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = linear;
ctx.font = 'bold 50px snas-serif';
for(let k = 0; k < lineNow; k ++) {
ctx.strokeText(txtAr, 20, lineHeight * k + lineHeight);
}
let txtstr = txtAr.substring(0, charIdx);
ctx.strokeText(txtstr, 20, lineHeight * lineNow + lineHeight);
charIdx ++;
if(charIdx > txtAr.length) {
lineNow += 1;
charIdx = 0;
}
if(lineNow > txtAr.length - 1) lineNow = 0;
setTimeout(drawText, 500);
})();
</script>
这句，
let txtAr = ['荆溪白石出，', '天寒红叶稀。', '山路元无雨，', '空翠湿人衣。'];
是欲要输出的多行文本，每行一个数组元素，请严格按格式建造自己的数组。
另外：#papa 选择器的尺寸、canvas的尺寸，以及其他设置，都可以根据需要在CSS和HTML中修改。 如果不需要渐变文本，下面五行删掉：
let linear = ctx.createLinearGradient(0, 0, w, h);
linear.addColorStop(0, 'red');
linear.addColorStop(0.3, 'olive');
linear.addColorStop(0.7, 'darkgreen');
linear.addColorStop(1, 'orange');
然后，将下句，
ctx.strokeStyle = linear;
改为（颜色自己定）：
ctx.strokeStyle = 'red'; 刚才前面一个帖子里询问是否有多行文本输入，这里就看到了，太好了{:4_187:} 黑黑厉害，什么都弄得出来{:4_199:}太厉害了！ 红影 发表于 2022-8-17 19:51
黑黑厉害，什么都弄得出来太厉害了！
这个貌似简单的 红影 发表于 2022-8-17 19:50
刚才前面一个帖子里询问是否有多行文本输入，这里就看到了，太好了
弄了单行的就顺带弄多行的 逐句逐字输出这个可以做标题字吧 马黑黑 发表于 2022-8-17 20:09
这个貌似简单的
会的就说简单，不会的感觉一座大山在前面 小辣椒 发表于 2022-8-17 21:37
会的就说简单，不会的感觉一座大山在前面
也是 小辣椒 发表于 2022-8-17 21:35
逐句逐字输出这个可以做标题字吧
想做什么都行吧 马黑黑 发表于 2022-8-17 20:09
这个貌似简单的
你那里什么都简单，对别人可不一定{:4_173:} 马黑黑 发表于 2022-8-17 20:09
弄了单行的就顺带弄多行的
太好了，正想要多行的呢{:4_187:} 红影 发表于 2022-8-17 21:58
太好了，正想要多行的呢
其实，不用画布处理这个更省心 红影 发表于 2022-8-17 21:57
你那里什么都简单，对别人可不一定
可是它的确不复杂的 马黑黑 发表于 2022-8-17 22:39
其实，不用画布处理这个更省心
嗯，黑黑弄个过JS的{:4_187:} 马黑黑 发表于 2022-8-17 22:40
可是它的确不复杂的
画布的不熟，觉得都复杂呢{:4_173:} 红影 发表于 2022-8-17 23:14
嗯，黑黑弄个过JS的
基本要依靠JS，纯纯的CSS弄起来很麻烦 红影 发表于 2022-8-17 23:14
画布的不熟，觉得都复杂呢
基础的几个命令，弄熟了就可以的