[代码分享] 使用 HTML5 的 Canvas 绘制编码说明图片

最急在工作中遇到一个需求，根据给定的编码生成编码说明，像下面这样的效果。
{{{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

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%;
}