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 图片,方法是右击、另存为。