许多紫微斗数排盘程序都会在命盘上画出三方四正的指示线，便于观察命盘。本文用Canvas在一个模拟命盘上画出三方四正指示线。
模拟命盘并画出“子”宫三方四正的HTML文件如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>voice2text - Convert MP3 to Text</title>
<style>
.center {
text-align: center;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.frame {
border: 3px solid black;
width: 908px;
/* 容器宽度 */
height: 908px;
/* 容器高度 */
padding: 5px 0 0 5px;
position: relative;
}
/* 定义网格容器样式 */
.grid-container {
display: grid;
/* 定义4列（纵向5根网格线，编号从1到5），每列宽度为均分 */
grid-template-columns: repeat(4, 1fr);
/* 定义4行（横向5根网格线，编号从1到5），每行高度为均分 */
grid-template-rows: repeat(4, 1fr);
gap: 2px;
/* 行列单元格之间的间隔 */
width: 902px;
/* 容器宽度 */
height: 902px;
/* 容器高度 */
}
/* 中央，第2行第2列，合并两行两列，列开始于2号列网格线，结束于第4号列网格线；
行开始于2号行网格线，结束于第4号行网格线；*/
.item0 {
grid-column: 2 / 4;
grid-row: 2 / 4;
position: relative;
border: 1px solid #000;
}
/* 子，第4行第3列，列开始于3号列网格线，结束于第4号列网格线；
行开始于4号行网格线，结束于第5号行网格线；*/
.item1 {
grid-column: 3 / 4;
grid-row: 4 / 5;
position: relative;
border: 1px solid #000;
}
/* 丑，第4行第2列，列开始于2号列网格线，结束于第3号列网格线；
行开始于4号行网格线，结束于第5号行网格线；*/
.item2 {
grid-column: 2 / 3;
grid-row: 4 / 5;
position: relative;
border: 1px solid #000;
}
/* 寅，第4行第1列，列开始于1号列网格线，结束于第2号列网格线；
行开始于4号行网格线，结束于第5号行网格线；*/
.item3 {
grid-column: 1 / 2;
grid-row: 4 / 5;
position: relative;
border: 1px solid #000;
}
/* 卯，第3行第1列，列开始于1号列网格线，结束于第2号列网格线；
行开始于3号行网格线，结束于第4号行网格线；*/
.item4 {
grid-column: 1 / 2;
grid-row: 3 / 4;
position: relative;
border: 1px solid #000;
}
/* 辰，第2行第1列，列开始于1号列网格线，结束于第2号列网格线；
行开始于2号行网格线，结束于第3号行网格线；*/
.item5 {
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
border: 1px solid #000;
}
/* 巳，第1行第1列，列开始于1号列网格线，结束于第2号列网格线；
行开始于1号行网格线，结束于第2号行网格线；*/
.item6 {
grid-column: 1 / 2;
grid-row: 1 / 2;
position: relative;
border: 1px solid #000;
}
/* 午，第1行第2列，列开始于2号列网格线，结束于第3号列网格线；
行开始于1号行网格线，结束于第2号行网格线；*/
.item7 {
grid-column: 2 / 3;
grid-row: 1 / 2;
position: relative;
border: 1px solid #000;
}
/* 未，第1行第3列，列开始于3号列网格线，结束于第4号列网格线；
行开始于1号行网格线，结束于第2号行网格线； */
.item8 {
grid-column: 3 / 4;
grid-row: 1 / 2;
position: relative;
border: 1px solid #000;
}
/* 申，第1行第4列，列开始于4号列网格线，结束于第5号列网格线；
行开始于1号行网格线，结束于第2号行网格线； */
.item9 {
grid-column: 4 / 5;
grid-row: 1 / 2;
position: relative;
border: 1px solid #000;
}
/* 酉，第2行第4列，列开始于4号列网格线，结束于第5号列网格线；
行开始于2号行网格线，结束于第3号行网格线；*/
.item10 {
grid-column: 4 / 5;
grid-row: 2 / 3;
position: relative;
border: 1px solid #000;
}
/* 戌，第3行第4列，列开始于4号列网格线，结束于第5号列网格线；
行开始于3号行网格线，结束于第4号行网格线；*/
.item11 {
grid-column: 4 / 5;
grid-row: 3 / 4;
position: relative;
border: 1px solid #000;
}
/* 亥，第4行第4列，列开始于4号列网格线，结束于第5号列网格线；
行开始于4号行网格线，结束于第5号行网格线；*/
.item12 {
grid-column: 4 / 5;
grid-row: 4 / 5;
position: relative;
border: 1px solid #000;
}
/* 设置 canvas 为绝对定位，并通过 z-index 让其显示在上面 */
#myCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="frame">
<!-- 划三方四正 -->
<canvas id="myCanvas" width="910" height="910"></canvas>
<div class="grid-container">
<div class="item0 center">
Center
</div>
<div class="item1 center">子</div>
<div class="item2 center">丑</div>
<div class="item3 center">寅</div>
<div class="item4 center">卯</div>
<div class="item5 center">辰</div>
<div class="item6 center">巳</div>
<div class="item7 center">午</div>
<div class="item8 center">未</div>
<div class="item9 center">申</div>
<div class="item10 center">酉</div>
<div class="item11 center">戌</div>
<div class="item12 center">亥</div>
</div>
</div>
<script>
function drawDashedLine(ctx, index) {
p1 = (index + 4) % 12
p2 = (index + 8) % 12
p3 = (index + 6) % 12
// 绘制虚线
ctx.beginPath();
ctx.lineTo(points[index][0], points[index][1]);
ctx.lineTo(points[p1][0], points[p1][1]);
ctx.lineTo(points[p2][0], points[p2][1]);
ctx.lineTo(points[index][0], points[index][1]);
ctx.lineTo(points[p3][0], points[p3][1]);
ctx.stroke();
}
const points = {
0: [580, 685], 1: [355, 685], 2: [225, 685], 3: [225, 580],
4: [225, 325], 5: [225, 225], 6: [355, 225], 7: [580, 225],
8: [685, 225], 9: [685, 325], 10: [685, 580], 11: [685, 685]
};
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 设置虚线样式
ctx.setLineDash([5, 5]);
ctx.strokeStyle = "rgb(0 0 255 / 50%";
drawDashedLine(ctx, 0);
</script>
</body>
</html>显示效果：
代码解释：
1、为了使Canvas浮动在命盘上方，需要给Canvas元素的css属性position定义为absolute，并将其父容器div.frame的css属性position定义为relative。Canvas的宽度和高度需要规定的足够大，以确保其中所绘图形能够完全展示。根据MDN文档的介绍，Canvas的宽度和高度推荐在元素标签中以属性的方式指定，而不推荐使用css规定。
2、由于命盘上各宫的尺寸都是固定的，所以，各宫用于连线的点也都可以预先确定。上面的代码中给从子到亥的十二宫的连线点都预先确定好了，并保存在points字典中：
const points = {
0: [580, 685], 1: [355, 685], 2: [225, 685], 3: [225, 580],
4: [225, 325], 5: [225, 225], 6: [355, 225], 7: [580, 225],
8: [685, 225], 9: [685, 325], 10: [685, 580], 11: [685, 685]
};
3、按紫微斗数的规则，命宫的三会宫的索引与命宫的索引差值为4，命宫的对冲宫位的索引与命宫的差值为6，因此，只需将命宫的索引传给划线函数，就能找出三会宫及对冲宫的索引，也就能从points字典中找出四个连线点。
p1 = (index + 4) % 12 // index为命宫索引， 命宫索引+4得到第一个三会宫的索引
p2 = (index + 8) % 12 // 命宫索引+8得到第二个三会宫的索引
p3 = (index + 6) % 12 // 命宫索引+6得到对冲宫位的索引
如果要画出戌（在十二地支中的索引为10）宫的三方四正指示线，只需像下面这样调用划线函数：
drawDashedLine(ctx, 10);
4、在实际应用到紫微斗数排盘程序中时，可以将命宫索引作为模版渲染参数传入，在jinja2模版文件中以如下方式调用划线函数即可在画天盘以及飞星时灵活画出三方四正指示线：
drawDashedLine(ctx, {{index}});
5、利用下面两行代码可以设定Canvas上下文的笔触为透明度50%的蓝色虚线：
// 设置虚线样式
ctx.setLineDash([5, 5]);
// 设置透明度为50%的蓝色
ctx.strokeStyle = "rgb(0 0 255 / 50%)";
浮动Canvas使之与命盘形成层次堆叠关系，设计出灵活的划线函数，确定十二地支宫的连线点，是在紫微斗数命盘上画出三方四正指示线的关键。
