使用js绘制地占盾

元始天尊 发表于 2021-12-5 13:21:20

本帖最后由元始天尊于 2021-12-5 13:23 编辑

本文仅当作娱乐

地占是中世纪占卜方式. 基本元素地占十六形如下:
```txt
大吉小吉男人女人红色白色喜悦悲伤结合限制获得损失群众道路龙头龙尾
* * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * *
```

test.js

```javascript
const draw_unit = 8;

const Geomancy = {
Way:    ,
People: ,
Union:    ,
Prison: ,
Head:    ,
Tail:    ,
Boy:    ,
Girl:    ,
Major:    ,
Minor:    ,
Red:    ,
White:    ,
Gain:    ,
Loss:    ,
Joy:    ,
Sad:    ,
width:    5 * draw_unit,// 元素占大小
height: 10 * draw_unit,
};

function rand_int(n) { // 生成1-n的整数
return Math.floor(Math.random() * n);
}

function draw_pt(ctx, pt) {
ctx.fillRect(pt, pt, draw_unit, draw_unit);
}

function draw_geomancy_elem(ctx, origin, item) {
var ox = origin;
var oy = origin;
if (item == null) return; // 不做图
for (var i = 0; i < item.length; i++) {
   if (item == 1) {
         draw_pt(ctx, );
   } else if (item == 2) {
         draw_pt(ctx, );
         draw_pt(ctx, );
   }
}
}

function draw_shield(ctx, origin, el) { // 绘制地占盾
var ox = origin;
var oy = origin;
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0); // 基本框架
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 4);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 6);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 6);
ctx.moveTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.arc(ox + Geomancy.width * 4, oy + Geomancy.width * 4, Geomancy.width * 5.656, Math.PI * 0.25, Math.PI * 0.75);
ctx.moveTo(ox + Geomancy.width * 7, oy + Geomancy.width * 0); // 1-8宫
ctx.lineTo(ox + Geomancy.width * 7, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 6, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 5, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 5, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 3, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 3, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 2, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 1, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 1, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2); // 9-12宫
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 4);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 4); // 13-14宫
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 6);
if (el != null) {
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
}
ctx.closePath();
ctx.font = (draw_unit * 3) + "px \"Times New Roman\"";
ctx.fillText("Shield", ox + Geomancy.width * 3.2, oy + Geomancy.width * 10.2);
ctx.stroke();
}

function draw_house(ctx, origin, el) { // 绘制矩形十二宫
var ox = origin;
var oy = origin;
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0); // 基本框架
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0);
ctx.moveTo(ox + Geomancy.width * 4, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 8, oy + Geomancy.width * 4);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 0, oy + Geomancy.width * 4);
ctx.lineTo(ox + Geomancy.width * 4, oy + Geomancy.width * 0);
ctx.moveTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 6);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 6);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 8, oy + Geomancy.width * 0);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 2);
ctx.moveTo(ox + Geomancy.width * 0, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 2, oy + Geomancy.width * 6);
ctx.moveTo(ox + Geomancy.width * 8, oy + Geomancy.width * 8);
ctx.lineTo(ox + Geomancy.width * 6, oy + Geomancy.width * 6);
if (el != null) {
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
   draw_geomancy_elem(ctx, , el);
}
ctx.closePath();
ctx.font = (draw_unit * 3) + "px \"Times New Roman\"";
ctx.fillText("House", ox + Geomancy.width * 3.2, oy + Geomancy.width * 8.5);
ctx.stroke();
}

function draw_button(canvas, ctx, origin, text, cb) {
var ox = origin;
var oy = origin;
var w = draw_unit * 16;
var h = draw_unit * 8;
ctx.fillStyle = "red";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(ox, oy);
ctx.lineTo(ox + w, oy);
ctx.lineTo(ox + w, oy + h);
ctx.lineTo(ox, oy + h);
ctx.lineTo(ox, oy);
ctx.closePath();
ctx.fill()
ctx.fillStyle = "black";
ctx.font = (draw_unit * 5) + "px \"Times New Roman\"";
ctx.fillText(text, ox + draw_unit * 5, oy + draw_unit * 5);

canvas.addEventListener("click", function(evt) {
   var rt = canvas.getBoundingClientRect();
   var x = evt.clientX - rt.left;
   var y = evt.clientY - rt.top;
   if (x >= ox && x < ox + w && y >= oy && y < oy + h) {
         cb();
   }
});
}

function gen_geomancy_elem(base) {
var el = new Array(16);
if (base == null) {
   el = ;
   el = ;
   el = ;
   el = ;
} else {
   el = base; el = base; el = base; el = base;
}
el = , el, el, el];
el = , el, el, el];
el = , el, el, el];
el = , el, el, el];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
el = + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2, 2 - (el + el) % 2];
return el;
}

function on_go() {
var el = gen_geomancy_elem();
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw_shield(ctx, , el);
draw_house(ctx, , el, 0);
draw_button(canvas, ctx, , "Go", on_go);
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var sz = (document.body.clientWidth>document.body.clientHeight)?document.body.clientWidth:document.body.clientHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

draw_shield(ctx, , null);
draw_house(ctx, , null, 0);
draw_button(canvas, ctx, , "Go", on_go);
```

index.html

```html
<html>
<head>
<style type="text/css">
* {
   margin: 0;
   padding: 0;
}
body, html {
   height:100%;
}
#canvas {
   position:absolute;
   height:100%; width:100%;
}
</style>
</head>
<body>
<canvas id="canvas" style="background-color: white;"></canvas>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
```

元始天尊 发表于 2021-12-8 17:05:44

使用js绘制六十四卦

```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var sz = (document.body.clientWidth>document.body.clientHeight)?document.body.clientWidth:document.body.clientHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

//draw_shield(ctx, , null);
//draw_house(ctx, , null, 0);
//draw_button(canvas, ctx, , "Go", on_go);

const draw_unit = 8;

const Wuxing = {
Jin:{color: "gold" },
Mu:{color: "green"},
Shui: {color: "black"},
Huo:{color: "red"},
Tu:{color: "brown"}
}

const Gua64Raw = [{"name": "天天乾"},{"name": "地地坤"},{"name": "山山艮"},{"name": "泽泽兑"}, {"name": "火火离"},
{"name": "风风巽"},{"name": "水水坎"},{"name": "雷雷震"},{"name": "山地剥"},{"name": "山地剥"},{"name": "山地剥"},
{"name": "山地剥"},{"name": "水地比"},{"name": "风地观"},{"name": "雷地豫"},{"name": "火地晋"},{"name": "泽地萃"},
{"name": "天地否"},{"name": "地山谦"},{"name": "水山蹇"},{"name": "风山渐"},{"name": "雷山小过"}, {"name": "火山旅"},
{"name": "泽山咸"},{"name": "天山遁"},{"name": "地水师"},{"name": "山水蒙"},{"name": "风水涣"},{"name": "雷水解"},
{"name": "火水未济"}, {"name": "泽水困"},{"name": "天水讼"},{"name": "地风升"},{"name": "山风蛊"},{"name": "水风井"},
{"name": "雷风恒"},{"name": "火风鼎"},{"name": "泽风大过"},{"name": "天风姤"},{"name": "地雷复"},{"name": "山雷颐"},
{"name": "水雷屯"},{"name": "风雷益"},{"name": "火雷噬嗑"},{"name": "泽雷随"},{"name": "天雷无妄"},{"name": "地火明夷"},
{"name": "山火贲"},{"name": "水火既济"}, {"name": "风火家人"},{"name": "雷火丰"},{"name": "泽火革"},{"name": "天火同人"},
{"name": "地泽临"},{"name": "山泽损"},{"name": "水泽节"},{"name": "风泽中孚"}, {"name": "雷泽归妹"},{"name": "火泽睽"},
{"name": "天泽履"},{"name": "地天泰"},{"name": "山天大畜"},{"name": "水天需"},{"name": "风天小畜"},{"name": "雷天大壮"},
{"name": "火天大有"},{"name": "泽天夬"}];

const Gua = {
Qian: { name: "乾", alias: "天", data: , wuxing: Wuxing.Jin},
Dui:{ name: "兑", alias: "泽", data: , wuxing: Wuxing.Jin},
Li:{ name: "离", alias: "火", data: , wuxing: Wuxing.Huo},
Zhen: { name: "震", alias: "雷", data: , wuxing: Wuxing.Mu},
Xun:{ name: "巽", alias: "风", data: , wuxing: Wuxing.Mu},
Kan:{ name: "坎", alias: "水", data: , wuxing: Wuxing.Shui},
Gen:{ name: "艮", alias: "山", data: , wuxing: Wuxing.Tu},
Kun:{ name: "坤", alias: "地", data: , wuxing: Wuxing.Tu},
};

function draw_gua64(ctx, origin, xiagua, shanggua) { // width:8unit height:16unit
var ox = origin;
var oy = origin;
if (xiagua == null) return; // 不做图
var prefix = shanggua.alias + xiagua.alias;
var gua64 = Gua64Raw.filter(item => item["name"].substr(0,2) == prefix);
var item = xiagua.data;
ctx.fillStyle = xiagua.wuxing.color;
for (var i = 0; i < 3; i++) {
   if (item == 1) {
         ctx.fillRect(ox + draw_unit * 0, oy + (5 - i) * draw_unit * 2, draw_unit * 5, draw_unit);
   } else if (item == 2) {
         ctx.fillRect(ox + draw_unit * 0, oy + (5 - i) * draw_unit * 2, draw_unit * 2, draw_unit);
         ctx.fillRect(ox + draw_unit * 3, oy + (5 - i) * draw_unit * 2, draw_unit * 2, draw_unit);
   }
}
var item = shanggua.data;
ctx.fillStyle = shanggua.wuxing.color;
for (var i = 0; i < 3; i++) {
   if (item == 1) {
         ctx.fillRect(ox + draw_unit * 0, oy + (2 - i) * draw_unit * 2, draw_unit * 5, draw_unit);
   } else if (item == 2) {
         ctx.fillRect(ox + draw_unit * 0, oy + (2 - i) * draw_unit * 2, draw_unit * 2, draw_unit);
         ctx.fillRect(ox + draw_unit * 3, oy + (2 - i) * draw_unit * 2, draw_unit * 2, draw_unit);
   }
}
ctx.fillRect(ox,oy,draw_unit,draw_unit);
ctx.fillStyle = "black";
ctx.font = (draw_unit * 1.5) + "px \"Times New Roman\"";
ctx.fillText(gua64.name, ox + draw_unit * 0.2, oy + 6.5 * draw_unit * 2);
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var sz = (document.body.clientWidth>document.body.clientHeight)?document.body.clientWidth:document.body.clientHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

draw_gua64(ctx, , Gua.Qian, Gua.Dui);
draw_gua64(ctx, , Gua.Li, Gua.Zhen);
draw_gua64(ctx, , Gua.Xun, Gua.Kan);
draw_gua64(ctx, , Gua.Gen, Gua.Kun);

```

Golden Blonde 发表于 2021-12-16 16:14:00

嘿嘿，我现在也玩JS了。

LICHAO你真是任何方面的编程都有涉猎啊。

元始天尊 发表于 2021-12-17 10:20:19

美俪女神发表于 2021-12-16 16:14
嘿嘿，我现在也玩JS了。

LICHAO你真是任何方面的编程都有涉猎啊。

在公司的时候只深入就行了, 出来以后就得自己全栈, 还要斗天斗地斗人

watermelon 发表于 2021-12-21 18:43:29

学习能力是真的强

Golden Blonde 发表于 2021-12-22 16:34:11

元始天尊发表于 2021-12-17 10:20
在公司的时候只深入就行了, 出来以后就得自己全栈, 还要斗天斗地斗人

这么说你现在是自主创业了？

Ink_Hin_fifteen 发表于 2022-2-16 10:30:28

嘿嘿来找寻元始天尊的足迹

页: [1]

技术宅的结界's Archiver

使用js绘制地占盾