{{{width="auto" height="auto"}}}
不同含义的编码用横杠分割，然后每个编码下面用箭头指明具体的含义。下面是我使用 canvas 实现的代码。具体的编码宽度大家可以根据实际情况进行调整，目前我的这个方法中支持起始坐标设定，和箭头的长度设定。
预览地址：https://www.huhailong.vip/res/html/codedescribe
/**
* 绘制编码说明图片
* @param {起始横坐标} startX
* @param {起始纵坐标} startY
* @param {编码信息对象} codeDescribeObj
*/
function drawCode(startX, startY, codeDescribeObj) {
const canvas = document.getElementById('code-canvas');
const ctx = canvas.getContext('2d');
let preTextWidth = startX; //左侧开始坐标
let preTextHeight = startY; //开始高度坐标
for(let i=0; i
对应的 html 文件和 css 文件如下
编码说明图片绘制
body{
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box{
text-align: center;
width: 800px;
}
canvas{
border: 1px solid gray;
border-radius: 4px;
width: 100%;
}
因为没有找到符合的组件，所以自己写了，如果有知道有现成组件的小伙伴也可以分享一下。
