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

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

article 2026/2/14 2:51:01

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

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使之与命盘形成层次堆叠关系，设计出灵活的划线函数，确定十二地支宫的连线点，是在紫微斗数命盘上画出三方四正指示线的关键。

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

相关文章：

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

传统汽车 HMI 设计 VS 新能源汽车 HMI 设计，有何不同？

【JavaWeb】前端基础

SpringMVC组件解析

使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例

数据结构C语言练习(两个栈实现队列)

Java 基础-28- 多态 — 多态下的类型转换问题

nextjs使用02

第2.6节 iOS生成全量和增量报告

应用分享 | AWG技术突破：操控钻石氮空位色心，开启量子计算新篇章！

前端开发学习路线完整指南

linux服务器专题2------vim编辑器如何设置显示行号

Jmeter触发脚本备份

【视觉与语言模型参数解耦】为什么？方案？

重建二叉树（C++）

VLAN、QinQ、VXLAN的区别

保姆级教程：synchronized 同步方法 vs 同步代码块，看完彻底懂锁！

10乱码问题的解释(1)

短视频文案--钓鱼女和滑板女

算法设计学习3

nginx的自动跳转https

python-leetcode 62.搜索插入位置

2. ollama下载及安装deepseek模型

deepseek使用记录26——思维混乱背后的理论泡沫与骗局

服务器入门操作1（深度学习）

Qt基本框架（1）

Buzz1.2.0视频语音转成TXT、SRT、VTT工具

动手学深度学习：AlexNet

MySql之binlog与数据恢复（Binlog and Data Recovery in MySQL）

JDK1.8和Maven、Git安装教程自用成功