技术宅的结界

 找回密码
 立即注册→加入我们

QQ登录

只需一步,快速开始

搜索
热搜: 下载 VB C 实现 编写
查看: 149|回复: 5
收起左侧

使用js绘制地占盾

[复制链接]

292

主题

482

帖子

5518

积分

用户组: 真·技术宅

UID
2
精华
71
威望
178 点
宅币
4172 个
贡献
153 次
宅之契约
0 份
在线时间
708 小时
注册时间
2014-1-25
发表于 2021-12-5 13:21:20 | 显示全部楼层 |阅读模式

欢迎访问技术宅的结界,请注册或者登录吧。

您需要 登录 才可以下载或查看,没有帐号?立即注册→加入我们

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

本文仅当作娱乐

地占是中世纪占卜方式. 基本元素地占十六形如下:

大吉   小吉  男人   女人   红色   白色  喜悦   悲伤   结合   限制  获得   损失   群众   道路  龙头   龙尾
* *    *     *     *    * *   * *    *    * *    * *    *    * *    *    * *    *    * *    *
* *   * *    *    * *    *    * *   * *   * *     *    * *    *    * *   * *    *     *     *
 *    * *   * *    *    * *    *    * *   * *     *    * *   * *    *    * *    *     *     *
 *    * *    *     *    * *   * *   * *    *     * *    *     *    * *   * *    *     *    * *

test.js

const draw_unit = 8;

const Geomancy = {
    Way:        [1, 1, 1, 1],
    People:     [2, 2, 2, 2],
    Union:      [2, 1, 1, 2],
    Prison:     [1, 2, 2, 1],
    Head:       [2, 1, 1, 1],
    Tail:       [1, 1, 1, 2],
    Boy:        [1, 1, 2, 1],
    Girl:       [1, 2, 1, 1],
    Major:      [2, 2, 1, 1],
    Minor:      [1, 1, 2, 2],
    Red:        [2, 1, 2, 2],
    White:      [2, 2, 1, 2],
    Gain:       [2, 1, 2, 1],
    Loss:       [1, 2, 1, 2],
    Joy:        [1, 2, 2, 2],
    Sad:        [2, 1, 1, 1],
    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[0], pt[1], draw_unit, draw_unit);
}

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

function draw_shield(ctx, origin, el) { // 绘制地占盾
    var ox = origin[0];
    var oy = origin[1];
    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, [ox + Geomancy.width * 7, oy + Geomancy.width * 0], el[0]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 6, oy + Geomancy.width * 0], el[1]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 5, oy + Geomancy.width * 0], el[2]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 4, oy + Geomancy.width * 0], el[3]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 3, oy + Geomancy.width * 0], el[4]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 2, oy + Geomancy.width * 0], el[5]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 1, oy + Geomancy.width * 0], el[6]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 0, oy + Geomancy.width * 0], el[7]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 6.5, oy + Geomancy.width * 2], el[8]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 4.5, oy + Geomancy.width * 2], el[9]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 2.5, oy + Geomancy.width * 2], el[10]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 0.5, oy + Geomancy.width * 2], el[11]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 5.5, oy + Geomancy.width * 4], el[12]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 1.5, oy + Geomancy.width * 4], el[13]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 6], el[14]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 8], el[15]);
    }
    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[0];
    var oy = origin[1];
    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, [ox + Geomancy.width * 1, oy + Geomancy.width * 3], el[0]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 0, oy + Geomancy.width * 5], el[1]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 1.5, oy + Geomancy.width * 6.3], el[2]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 6], el[3]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 5.5, oy + Geomancy.width * 6.3], el[4]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 7, oy + Geomancy.width * 5], el[5]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 6, oy + Geomancy.width * 3], el[6]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 7, oy + Geomancy.width * 1], el[7]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 5.5, oy + Geomancy.width * 0], el[8]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 0.2], el[9]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 1.5, oy + Geomancy.width * 0], el[10]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 0, oy + Geomancy.width * 1], el[11]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 4.5, oy + Geomancy.width * 2], el[12]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 2.5, oy + Geomancy.width * 2], el[13]);
        draw_geomancy_elem(ctx, [ox + Geomancy.width * 3.5, oy + Geomancy.width * 4], el[14]);
    }
    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[0];
    var oy = origin[1];
    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[0] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
        el[1] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
        el[2] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
        el[3] = [2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2), 2 - (rand_int(64) % 2)];
    } else {
        el[0] = base[0]; el[1] = base[1]; el[2] = base[2]; el[3] = base[3];
    }
    el[4] = [el[0][0], el[1][0], el[2][0], el[3][0]];
    el[5] = [el[0][1], el[1][1], el[2][1], el[3][1]];
    el[6] = [el[0][2], el[1][2], el[2][2], el[3][2]];
    el[7] = [el[0][3], el[1][3], el[2][3], el[3][3]];
    el[8] = [2 - (el[0][0] + el[1][0]) % 2, 2 - (el[0][1] + el[1][1]) % 2, 2 - (el[0][2] + el[1][2]) % 2, 2 - (el[0][3] + el[1][3]) % 2];
    el[9] = [2 - (el[2][0] + el[3][0]) % 2, 2 - (el[2][1] + el[3][1]) % 2, 2 - (el[2][2] + el[1][2]) % 2, 2 - (el[3][3] + el[1][3]) % 2];
    el[10] = [2 - (el[4][0] + el[5][0]) % 2, 2 - (el[4][1] + el[5][1]) % 2, 2 - (el[4][2] + el[5][2]) % 2, 2 - (el[4][3] + el[5][3]) % 2];
    el[11] = [2 - (el[6][0] + el[7][0]) % 2, 2 - (el[6][1] + el[7][1]) % 2, 2 - (el[6][2] + el[7][2]) % 2, 2 - (el[6][3] + el[7][3]) % 2];
    el[12] = [2 - (el[8][0] + el[9][0]) % 2, 2 - (el[8][1] + el[9][1]) % 2, 2 - (el[8][2] + el[9][2]) % 2, 2 - (el[8][3] + el[9][3]) % 2];
    el[13] = [2 - (el[10][0] + el[11][0]) % 2, 2 - (el[10][1] + el[11][1]) % 2, 2 - (el[10][2] + el[11][2]) % 2, 2 - (el[10][3] + el[11][3]) % 2];
    el[14] = [2 - (el[12][0] + el[13][0]) % 2, 2 - (el[12][1] + el[13][1]) % 2, 2 - (el[12][2] + el[13][2]) % 2, 2 - (el[12][3] + el[13][3]) % 2];
    el[15] = [2 - (el[14][0] + el[0][0]) % 2, 2 - (el[14][1] + el[0][1]) % 2, 2 - (el[14][2] + el[0][2]) % 2, 2 - (el[14][3] + el[0][3]) % 2];
    return el;
}

function on_go() {
    var el = gen_geomancy_elem();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw_shield(ctx, [10, 10], el);
    draw_house(ctx, [400, 10], el, 0);
    draw_button(canvas, ctx, [300, 450], "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, [10, 10], null);
draw_house(ctx, [400, 10], null, 0);
draw_button(canvas, ctx, [300, 450], "Go", on_go);

index.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-05 下午1.20.11_副本.png

评分

参与人数 1威望 +10 宅币 +1 贡献 +10 收起 理由
watermelon + 10 + 1 + 10 牛逼

查看全部评分

回复

使用道具 举报

292

主题

482

帖子

5518

积分

用户组: 真·技术宅

UID
2
精华
71
威望
178 点
宅币
4172 个
贡献
153 次
宅之契约
0 份
在线时间
708 小时
注册时间
2014-1-25
 楼主| 发表于 2021-12-8 17:05:44 | 显示全部楼层

使用js绘制六十四卦

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, [10, 10], null);
//draw_house(ctx, [400, 10], null, 0);
//draw_button(canvas, ctx, [300, 450], "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: [1, 1, 1], wuxing: Wuxing.Jin}, 
    Dui:  { name: "兑", alias: "泽", data: [1, 1, 2], wuxing: Wuxing.Jin},
    Li:{ name: "离", alias: "火", data: [1, 2, 1], wuxing: Wuxing.Huo},
    Zhen: { name: "震", alias: "雷", data: [1, 2, 2], wuxing: Wuxing.Mu},
    Xun:  { name: "巽", alias: "风", data: [2, 1, 1], wuxing: Wuxing.Mu},
    Kan:  { name: "坎", alias: "水", data: [2, 1, 2], wuxing: Wuxing.Shui},
    Gen:  { name: "艮", alias: "山", data: [2, 2, 1], wuxing: Wuxing.Tu},
    Kun:  { name: "坤", alias: "地", data: [2, 2, 2], wuxing: Wuxing.Tu},
};

function draw_gua64(ctx, origin, xiagua, shanggua) { // width:8unit height:16unit
    var ox = origin[0];
    var oy = origin[1];
    if (xiagua == null) return; // 不做图
    var prefix = shanggua.alias + xiagua.alias;
    var gua64 = Gua64Raw.filter(item => item["name"].substr(0,2) == prefix)[0];
    var item = xiagua.data;
    ctx.fillStyle = xiagua.wuxing.color;
    for (var i = 0; i < 3; i++) {
        if (item[i] == 1) {
            ctx.fillRect(ox + draw_unit * 0, oy + (5 - i) * draw_unit * 2, draw_unit * 5, draw_unit);
        } else if (item[i] == 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[i] == 1) {
            ctx.fillRect(ox + draw_unit * 0, oy + (2 - i) * draw_unit * 2, draw_unit * 5, draw_unit);
        } else if (item[i] == 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, [draw_unit, draw_unit], Gua.Qian, Gua.Dui);
draw_gua64(ctx, [draw_unit * 8, draw_unit], Gua.Li, Gua.Zhen);
draw_gua64(ctx, [draw_unit, draw_unit * 16], Gua.Xun, Gua.Kan);
draw_gua64(ctx, [draw_unit * 8, draw_unit * 16], Gua.Gen, Gua.Kun);


截屏2021-12-08 下午5.04.36.png

39

主题

222

帖子

7872

积分

用户组: 管理员

UID
77
精华
14
威望
144 点
宅币
7133 个
贡献
159 次
宅之契约
0 份
在线时间
162 小时
注册时间
2014-2-22
发表于 2021-12-16 16:14:00 | 显示全部楼层
嘿嘿,我现在也玩JS了。

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

292

主题

482

帖子

5518

积分

用户组: 真·技术宅

UID
2
精华
71
威望
178 点
宅币
4172 个
贡献
153 次
宅之契约
0 份
在线时间
708 小时
注册时间
2014-1-25
 楼主| 发表于 2021-12-17 10:20:19 | 显示全部楼层
美俪女神 发表于 2021-12-16 16:14
嘿嘿,我现在也玩JS了。

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


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

29

主题

334

帖子

1978

积分

用户组: 上·技术宅

UID
3808
精华
11
威望
105 点
宅币
1214 个
贡献
165 次
宅之契约
0 份
在线时间
385 小时
注册时间
2018-5-6
发表于 2021-12-21 18:43:29 | 显示全部楼层
学习能力是真的强
Passion Coding!

39

主题

222

帖子

7872

积分

用户组: 管理员

UID
77
精华
14
威望
144 点
宅币
7133 个
贡献
159 次
宅之契约
0 份
在线时间
162 小时
注册时间
2014-2-22
发表于 2021-12-22 16:34:11 | 显示全部楼层
元始天尊 发表于 2021-12-17 10:20
在公司的时候只深入就行了, 出来以后就得自己全栈, 还要斗天斗地斗人

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

本版积分规则

QQ|申请友链||Archiver|手机版|小黑屋|技术宅的结界 ( 滇ICP备16008837号 )|网站地图

GMT+8, 2022-1-20 09:06 , Processed in 0.044353 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表