升级一下 textcanvas 模块

马黑黑 · 发表于 2025-6-22 10:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

测试使用中觉得，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: [160, 85, 30, 160, 85, 160], // 渐变坐标
// 渐变色标
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>