最急在工作中遇到一個需求，根據給定的編碼生成編碼說明，像下面這樣的效果。
不同含義的編碼用橫杠分割，然后每個編碼下面用箭頭指明具體的含義。下面是我使用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<codeDescribeObj.codeList.length; i++){ctx.font = "50px Arial";let tempText = ctx.measureText(codeDescribeObj.codeList[i]);ctx.fillText(codeDescribeObj.codeList[i], preTextWidth, preTextHeight);if(i < codeDescribeObj.codeList.length - 1){ctx.fillText('—',preTextWidth+tempText.width+10,preTextHeight - 2);}ctx.stroke();ctx.font = "16px Arial";let describeY = preTextHeight + codeDescribeObj.arrowHeightList[i];ctx.fillText(codeDescribeObj.describeList[i], preTextWidth, describeY);ctx.stroke();//繪制箭頭ctx.lineWidth = 1;ctx.beginPath();ctx.moveTo(preTextWidth + 30, preTextHeight + 10);ctx.lineTo(preTextWidth + 30, describeY - 20);ctx.lineTo(preTextWidth + 25, describeY - 30);ctx.moveTo(preTextWidth + 30, describeY - 20);ctx.lineTo(preTextWidth + 35, describeY - 30);ctx.stroke();//更新坐標信息preTextWidth = preTextWidth + tempText.width + 80;}
}//定義編碼信息對象
const codeDescribeObj = {codeList: ['F1','YHT','23Y','S1','8R'],describeList: ['方案代碼','顏色代碼','年代系列代碼','品類款式代碼','尺寸方向代碼'],arrowHeightList: [100,300,200,150,300]
}drawCode(120, 100, codeDescribeObj);對應的html文件和css文件如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>編碼說明圖片繪制</title><link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body><div class="box"><canvas id="code-canvas" width="1000" height="600"></canvas></div><script src="./index.js"></script>
</body>
</html>
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%;
}
如果本次分享的代碼對你有所幫助，或者覺得不錯的話，記得點個大大的贊哦！
原文地址：【代碼分享】使用HTML5的Canvas繪制編碼說明圖片
