字模效果

参考文章

具体实现

展示代码为40*40大小的格子，文字单字实现组合而成

html实现

有多少文字要有多少canvas，以每次最多6个文字为例，不需要在页面展示可以设置成visibility: hidden，但是页面需要canvas来生成字模

展示名称：
<div class="setting-show-item">
	<canvas v-for="item in 6" :key="item" class="tutorial" width="40" height="40"></canvas>
</div>

js实现

仅实现常规字模生成，具体原理以及替换样式可以查看参考文章

var bitArr = new Array()
for (var i = 0; i < 8; i++) bitArr[i] = 0x80 >> i
var ctx = null
var fontSize = 40 // 字体大小，以40*40为例
const transformMatrix = (str, canvas) => {
	ctx = canvas.getContext('2d')
	canvas.width = fontSize
	canvas.height = fontSize
	ctx.textAlign = 'center'
	ctx.textBaseline = 'middle'
	ctx.font = fontSize + "px '" + '楷体' + "'" // 字体可以更换
	var outStr = ''
	outStr += getzm(str)
	return outStr
}

const getzm=(c)=> {
	ctx.fillStyle = '#000000'
	ctx.fillRect(0, 0, fontSize, fontSize)
	ctx.fillStyle = '#FFFFFF'
	ctx.fillText(c, fontSize / 2, fontSize / 2)
	var data = ctx.getImageData(0, 0, fontSize, fontSize).data
	var bs = Math.ceil(fontSize / 8) //每行占字节数
	var zm = new Array(bs * fontSize)
	for (var i = 0; i < zm.length; i++) zm[i] = 0
	for (var i = 0; i < fontSize; i++)
		for (var j = 0; j < fontSize; j++)
			if (data[i * fontSize * 4 + j * 4]) zm[Math.floor(j / 8) + i * bs] += bitArr[j % 8]
	var outStr = ''
	for (var i = 0; i < zm.length - 1; i++) outStr += toHex(zm[i]) + ','
	outStr += toHex(zm[i]) + ''
	return outStr
}
// 获取文字字模
const matrixValueArr = ref([]) // 生成的字模字节数组
const keySplit= ref('') // 想要生成字模的文字，如示例：'字模'
const handleGetMatrixValue = ()=>{
	const canvasArr = document.getElementsByClassName('tutorial')
	matrixValueArr.value = []
	// 逐个文字生成字模数据
	for (let i = 0; i < keySplit.value.length; i++) {
		matrixValueArr.value.push(...transformMatrix(keySplit.value[i],canvasArr[i]).split(','))
	}
}
handleGetMatrixValue () // 在合适的位置调用方法