动态生成canvas文本模块

马黑黑 · 发表于 2025-6-20 17:03

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

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

x

本帖最后由马黑黑于 2025-6-20 17:09 编辑

textcanvas.js是一个ES6 module模块，使用它可以方便地在Web页中插入绘制在canvas画布上的文本，支持文本填充、描边和渐变，默认支持文本阴影（可自行设置）。

使用方法：在 type="module" 的 script 标签里使用 import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js' 导入模块，之后使用指令 const mycanv = textcanvas(str, config); 获取canvas画布元素 mycanv，最后将 mycanv 元素 appendChild 到指定父元素中即可。textcanvas() 函数需要两个参数，str 必须，为要输出的文本， config 可选，为相关配置。

以下是一个完整的应用示例，属于简单应用：

<script type="module">
	import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js';

	var text = `〇一二三四五六七八九`; // 输出文本
	// 简单配置
	var config = {
		font: 'bold 60px "黑体"', // 字体 : 粗体、60像素、黑体
		fill: true, // 填充开关
		fillColor: 'olive' // 填充颜色
	};

	var canv = textcanvas(text, config); // 绘制文本并将canvas画布返回给 canv 变量
	document.body.appendChild(canv); // 将画布追加到页面中
</script>

待输出文本支持多行，每一行字数要合适，textcanvas未做自动折行处理，其最大宽度限制为 1400px。若使用多行文本，请将文本分行，文本使用反引号 `` 包裹。下面是输出多行文本的简单示例：

<script type="module">
	import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js';

	// 多行文本
	var text = `
ABCDEFG
abcdefg
一二三四五六
123456`;

	// 配置
	var config = {
		font: 'bold 30px sans-serif', // 字体
		fill: true, // 填充开关
		fillColor: '#ff662c' // 填充颜色
	};

	var canv = textcanvas(text, config);
	document.body.appendChild(canv);
</script>

完整配置包含的内容相对较多，主要分五个层面：字体相关、填充相关、描边相关、渐变相关、阴影相关。下面是配置示例代码+说明：

const config = {
	// 1. 字体相关
	font: 'bold 80px sans-serif', // 字体
	align: 'center', // 文本对齐，可选值 ：left, center, right

	// 2. 填充相关
	fill: true, // 是否填充，true 或 false
	fillColor: 'yellow', // 填充颜色

	// 3. 描边相关
	stroke : false, // 是否描边，true 或 false
	strokeColor: 'gold', // 描边颜色

	// 4. 渐变相关
	//不用渐变可不设置，若设置则 fillColor 和 strokeColor 将被渐变取代
	gradient: {
		type: 'radial', // 渐变类型，可选值有 linear 或 radial
		// 渐变坐标
		// linear 使用 [x0, y0, x1, y1]，radial 使用 [x0, y0, r0, x1, y1, r1]
		value: [10, 60, 10, 200, 160, 500],
		// 渐变偏移和颜色
		color:  [
			{ offset: 0, color: 'purple' },
			{ offset: 0.5, color: 'yellow' },
			{ offset: 1, color: 'green' }
		]
	},

	// 5. 阴影相关
	shadow: 'gray', // 文本阴影色
	shadowX: 1, // 阴影X偏移量（支持负数值）
	shadowY: 1, // 文本Y偏移量（支持负数值）
	shadowBlur: 2 // 阴影模糊度
};

渐变的设置相对复杂，共三个内容：其一，渐变类型，字符型，二选一，linear 或 radial，名称放在小角引号内，拼写不能有错；其二，渐变坐标数据，数组型，数组元素为数值型，基于线性渐变 linear 共四个，[x0, y0, x1, y1]，基于径向渐变 radial 共六个，[x0, y0, r0, x1, y1, r1]，要齐全且不能有错。数组元素内各值与canvas画布宽高尺寸有关，是n个像素值但不能要 px 单位；其三，渐变偏移和色标，数组型，至少需要两组数组元素，数组内元素的内容是对象{...}，对象内容是canvas设置渐变偏移和色标的基本表达，例如上面代码中，offset: 0.5 表示颜色渐变的边界在中心处，color: 'yellow' 表示该处的颜色是黄色。offset 从 0~1 设置偏移量，含 0 和 1，不能超出范围。设置合适的渐变，可以创建出漂亮的文本，所以，如果对canvas渐变不太熟悉，可访问 HTML5 Canvas 渐变补补课。

下面给出一个渐变的应用示例：

<script type="module">
import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js';

const str = `你站在桥上看风景\n看风景的人在楼上看你\n明月装饰了你的窗子\n你装饰了别人的梦`;

const setting = {
	font: 'bold 120px "KaiTi", sans-serif',
	align: 'right', // 右对齐
	gradient: {
		type: 'linear', // 线性渐变
		value: [0, 384, 820, 0], // 渐变坐标
		// 渐变色标
		color:  [
			{ offset: 0, color: 'purple' },
			{ offset: 0.5, color: 'yellow' },
			{ offset: 1, color: 'green' }
		]
	},
	fill: true, // 开启填充功能（将用渐变填充）
	shadow: 'gray', // 文本阴影色
	shadowX: 5, // 阴影X偏移量
	shadowY: 5, // 文本Y偏移量
};

	const mycanv = textcanvas(str, setting);
	// console.log(mycanv); // 查看canvas画布（含宽高尺寸）
	document.body.appendChild(mycanv);
</script>

最后再举一个应用示例，canvas文本添加到一个div中，填充+描边，没有渐变：

<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; }
</style>

<div id="papa"></div>

<script type="module">
import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js';

const mystr = `大漠沙如雪，\n燕山月似钩。\n何当金络脑，\n快走踏清秋。`;

const myconfig = {
	font: 'bold 100px "Microsoft Yahei", sans-serif',
	fill: true,
	fillColor: 'white',
	stroke: true,
	strokeColor: 'yellow',
	shadowX: 4,
	shadowY: 3,
	shadowBlur: 2
};

const mycanv = textcanvas(mystr, myconfig);
papa.appendChild(mycanv);
</script>

顺便提一下：canvas生成的文本，可以存为背景透明的 .png 图片，方法是右击、另存为。