簡單的例子，大家可以根據情況，動態繪製與生成。
PS：本人也在學習，工作中也有這個需求，如果項目結束了，將會把完整代碼發佈到博客，記得關注哈！！
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(90,10);
cxt.lineTo(90,50);
cxt.lineTo(50,50);
cxt.lineTo(50,90);
cxt.moveTo(90,50);
cxt.lineTo(135,50);
cxt.lineTo(135,90);
cxt.stroke();
</script>
</body>
</html>