当前位置：首页 > news >正文

利用Canvas在紫微斗数命盘上画出三方四正

news 2025/4/3 11:20:28

许多紫微斗数排盘程序都会在命盘上画出三方四正的指示线，便于观察命盘。本文用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) % 12p2 = (index + 8) % 12p3 = (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字典中找出四个连线点。