升级一下 textcanvas 模块
测试使用中觉得，textcanvas 生成的画布成品如果可以定义 canvas 背景色、内边距，其实用性会更好一些。关于背景，相当于给 canvas 画布着个底色，但是不是给 canvas 标签加个 CSS background 属性，那个作用有效，需要给画布画一个带颜色的矩形，生成的成品才真正被认可。当然，background 属性可以在 DOM 中生效，但想让 ThreeJS 接收为纹理贴图，那不管用。
背景在配置中的键名是bg，例如，bg: 'olive'，或者用带透明的 rgba，bg: 'rgba(0, 60, 100, 0.5)'，配置代码随意放在什么地方，一般建议跟在字体设置之后。
关于内边距，设计成xy两个方向，x 指向左右，y 指向上下，键名为 padding，例如，padding: { x: 35, y: 40 }，这表示文本左右各留出 35px、上下各留出 40px 的空间，注意xy值是数值，不带 px 单位。
下面是代码示例，运行效果放在二楼：
<style>
#papa { margin: 30px auto;width: 1024px; height: 640px; background: #eee; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
canvas { border: 1px solid gray; }
</style>
<div id="papa"></div>
<script type="module">
import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas1.js';
const str = `ABCDEFG abcdefg\n0123456789\n甲乙丙丁戊己庚辛壬癸`;
const config = {
font: 'bold 40px "KaiTi", sans-serif',
align: 'center', // 文本对齐，可选值 ：left, center, right
padding: { x: 30, y: 40 },
bg: 'rgba(20,40,180,0.25)',
gradient: {
type: 'radial', // 渐变类型，可选 linear 或 radial
value: , // 渐变坐标
// 渐变色标
color:[
{ offset: 0, color: 'orange' },
{ offset: 0.35, color: 'magenta' },
{ offset: 0.7, color: 'darkgreen' },
{ offset: 1, color: 'yellow' }
]
},
fill: true, // 是否填充，false不填充
shadowX: 1, // 阴影X偏移量
shadowY: 1, // 文本Y偏移量
shadowBlur: 2
};
const mycanv = textcanvas(str, config);
//console.log(mycanv.width, mycanv.height); //查看canvas画布宽高尺寸
papa.appendChild(mycanv);
</script>
<style>
#papa { margin: 30px auto;width: 100%; height: 460px; background: #eee; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
canvas { border: 1px solid gray; }
</style>
<div id="papa"></div>
<script type="module">
import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas1.js';
const str = `ABCDEFG abcdefg\n0123456789\n甲乙丙丁戊己庚辛壬癸`;
const config = {
font: 'bold 40px "KaiTi", sans-serif',
align: 'center', // 文本对齐，可选值 ：left, center, right
padding: { x: 30, y: 40 },
bg: 'rgba(20,40,180,0.25)',
gradient: {
type: 'radial', // 渐变类型，可选 linear 或 radial
value: , // 渐变坐标
// 渐变色标
color:[
{ offset: 0, color: 'orange' },
{ offset: 0.35, color: 'magenta' },
{ offset: 0.7, color: 'darkgreen' },
{ offset: 1, color: 'yellow' }
]
},
fill: true, // 是否填充，false不填充
shadowX: 1, // 阴影X偏移量
shadowY: 1, // 文本Y偏移量
shadowBlur: 2
};
const mycanv = textcanvas(str, config);
//console.log(mycanv.width, mycanv.height); //查看canvas画布宽高尺寸
papa.appendChild(mycanv);
</script> 马黑黑 发表于 2025-6-22 10:55
#papa { margin: 30px auto;width: 100%; height: 460px; background: #eee; box-shadow: 2px 2px 8px ...
谢谢老师详细讲解。辛苦了！ 梦江南 发表于 2025-6-22 11:25
谢谢老师详细讲解。辛苦了！
{:4_191:} 升级后就可以有背景色和内边距了，可以跟文字一起设置了{:4_187:} 红影 发表于 2025-6-22 13:22
升级后就可以有背景色和内边距了，可以跟文字一起设置了
可定义的项目多了两个。缺省内边距是10，缺省背景是透明，第一个版本也是这样。 谢谢老师，这个预览显示正常{:4_191:} 杨帆 发表于 2025-6-22 14:14
谢谢老师，这个预览显示正常
原来那个也没问题的。有时候，硬刷新是必要的：Ctrl +F5，然后在软刷新：F5 马黑黑 发表于 2025-6-22 17:45
原来那个也没问题的。有时候，硬刷新是必要的：Ctrl +F5，然后在软刷新：F5
好，我再看看 马黑黑 发表于 2025-6-22 13:26
可定义的项目多了两个。缺省内边距是10，缺省背景是透明，第一个版本也是这样。
嗯，有这样可定义的好多了，可以按照需要做调整了。 红影 发表于 2025-6-22 21:05
嗯，有这样可定义的好多了，可以按照需要做调整了。
是啊。最初的想法是适应文字尺寸。 马黑黑 发表于 2025-6-22 23:57
是啊。最初的想法是适应文字尺寸。
后来想到的跟多了吧。 红影 发表于 2025-6-23 11:35
后来想到的跟多了吧。
这个 padding、bg 原来也是有计划的，只是先完成适应文字尺寸的，然后在一点点扩展。到目前止，模块的函数其实还是没有增加，只是内部的算法加入了 bg、padding 相关的因素 马黑黑 发表于 2025-6-23 23:21
这个 padding、bg 原来也是有计划的，只是先完成适应文字尺寸的，然后在一点点扩展。到目前止，模块的函 ...
嗯嗯，内部增加了，而且还有对外的接口，便于操作。
越来越完善了。{:4_187:} 红影 发表于 2025-6-24 09:15
嗯嗯，内部增加了，而且还有对外的接口，便于操作。
越来越完善了。
{:4_190:} 看来教程一天不能看多个，我还是先灌会水去缓缓。。{:4_170:} 花飞飞 发表于 2025-7-2 17:36
看来教程一天不能看多个，我还是先灌会水去缓缓。。
有些东东是理解核心的就行，具体实现的细节恐怕有一定的难度 马黑黑 发表于 2025-7-2 18:15
有些东东是理解核心的就行，具体实现的细节恐怕有一定的难度
那这个补充版算是周边了。。{:4_173:} 花飞飞 发表于 2025-7-2 21:23
那这个补充版算是周边了。。
是的吧 马黑黑 发表于 2025-7-2 22:07
是的吧
上午外出，下午还要跑一趟，晚上再来瞅瞅
页:
[1]
2