当前位置：文江博客话题详情

JavaScript Canvas three.js egret pixijs

canvas如何绘制n个相切的蜂窝网格

发布于 2022-09-07 16:28:16 字数 114 浏览 26 评论 0

请教各位大神，此类效果如何实现

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

时常饿 2022-09-14 16:28:16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas></canvas>
<script>
    window.onload = function () {
        const canvas = document.getElementsByTagName('canvas')[0]
        const ctx = canvas.getContext("2d");
        const w = document.documentElement.clientWidth;
        const h = document.documentElement.clientHeight;
        canvas.width = w;
        canvas.height = h;
        let mols = []
        function  init() {
            let mol = new generate_mol(1)
            mols.push(mol);
        }
        function draw(){
            canvas.width = canvas.width;
            for(var i=0;i<mols.length;i++){
                var m = mols[i];
                m.draw();
            }
        }
        function  generate_mol(mol) {
            this.x = w*0.3;
            this.y = h*0.3;
            // this.vx = Math.random()*-2;
            // this.vy = Math.random()*2;
            // this.vr = 0.1;
            this.r = Math.random()*Math.PI;
            this.draw = function() {
                // ctx.save();
                // ctx.translate(this.x + 20, this.y + 80);
                // ctx.rotate(Math.PI * 0.17);
                // ctx.translate(-this.x + 20, -this.y - 80);
                // ctx.beginPath();
                // ctx.moveTo(this.x, this.y + 30);
                // ctx.lineTo(this.x - 26, this.y + 45);
                // ctx.lineTo(this.x - 26, this.y + 75);
                // ctx.lineTo(this.x, this.y + 90);
                // ctx.lineTo(this.x + 26, this.y + 75);
                // ctx.lineTo(this.x + 26, this.y + 45);
                // ctx.lineTo(this.x, this.y + 30);
                // ctx.moveTo(this.x - 20, this.y + 47);
                // ctx.strokeStyle = "rgba(0,0,0,0.2)";
                // ctx.lineWidth = 3;
                // ctx.stroke();
                // ctx.closePath();
                // ctx.restore()
                ctx.fillStyle = "rgba(0,0,0,0.5)";
                ctx.font = "15px Arial";
                ctx.fillText("A", this.x+40 , this.y+80);

                ctx.save();
                ctx.translate(this.x + 20, this.y + 30);
                ctx.rotate(Math.PI * 0.17);
                ctx.translate(-this.x + 20, -this.y - 80);
                ctx.beginPath();
                ctx.moveTo(this.x, this.y + 30);
                ctx.lineTo(this.x - 26, this.y + 45);
                ctx.lineTo(this.x - 26, this.y + 75);
                ctx.lineTo(this.x, this.y + 90);
                ctx.lineTo(this.x + 26, this.y + 75);
                ctx.lineTo(this.x + 26, this.y + 45);
                ctx.lineTo(this.x, this.y + 30);
                ctx.moveTo(this.x - 20, this.y + 47);
                ctx.strokeStyle = "rgba(0,0,0,0.2)";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.fillStyle = "rgba(0,0,0,0.5)";
                ctx.font = "15px Arial";
                ctx.fillText("B", this.x , this.y+70);
                ctx.closePath();
                ctx.restore()

                ctx.save();
                ctx.translate(this.x + 68, this.y + 56);
                ctx.rotate(Math.PI * 0.17);
                ctx.translate(-this.x + 20, -this.y - 80);
                ctx.beginPath();
                ctx.moveTo(this.x, this.y + 30);
                ctx.lineTo(this.x - 26, this.y + 45);
                ctx.lineTo(this.x - 26, this.y + 75);
                ctx.lineTo(this.x, this.y + 90);
                ctx.lineTo(this.x + 26, this.y + 75);
                ctx.lineTo(this.x + 26, this.y + 45);
                ctx.lineTo(this.x, this.y + 30);
                ctx.moveTo(this.x - 20, this.y + 47);
                ctx.strokeStyle = "rgba(0,0,0,0.2)";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
                ctx.restore()

                ctx.save();
                ctx.translate(this.x + 66, this.y + 110);
                ctx.rotate(Math.PI * 0.17);
                ctx.translate(-this.x + 20, -this.y - 80);
                ctx.beginPath();
                ctx.moveTo(this.x, this.y + 30);
                ctx.lineTo(this.x - 26, this.y + 45);
                ctx.lineTo(this.x - 26, this.y + 75);
                ctx.lineTo(this.x, this.y + 90);
                ctx.lineTo(this.x + 26, this.y + 75);
                ctx.lineTo(this.x + 26, this.y + 45);
                ctx.lineTo(this.x, this.y + 30);
                ctx.moveTo(this.x - 20, this.y + 47);
                ctx.strokeStyle = "rgba(0,0,0,0.2)";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
                ctx.restore()

                ctx.save();
                ctx.translate(this.x + 20, this.y + 135);
                ctx.rotate(Math.PI * 0.17);
                ctx.translate(-this.x + 20, -this.y - 80);
                ctx.beginPath();
                ctx.moveTo(this.x, this.y + 30);
                ctx.lineTo(this.x - 26, this.y + 45);
                ctx.lineTo(this.x - 26, this.y + 75);
                ctx.lineTo(this.x, this.y + 90);
                ctx.lineTo(this.x + 26, this.y + 75);
                ctx.lineTo(this.x + 26, this.y + 45);
                ctx.lineTo(this.x, this.y + 30);
                ctx.moveTo(this.x - 20, this.y + 47);
                ctx.strokeStyle = "rgba(0,0,0,0.2)";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
                ctx.restore()
                //
                ctx.save();
                ctx.translate(this.x -27,this.y + 108);
                ctx.rotate(Math.PI * 0.17);
                ctx.translate(-this.x + 20, -this.y - 80);
                ctx.beginPath();
                ctx.moveTo(this.x, this.y + 30);
                ctx.lineTo(this.x - 26, this.y + 45);
                ctx.lineTo(this.x - 26, this.y + 75);
                ctx.lineTo(this.x, this.y + 90);
                ctx.lineTo(this.x + 26, this.y + 75);
                ctx.lineTo(this.x + 26, this.y + 45);
                ctx.lineTo(this.x, this.y + 30);
                ctx.moveTo(this.x - 20, this.y + 47);
                ctx.strokeStyle = "rgba(0,0,0,0.2)";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
                ctx.restore()

                ctx.save();
                ctx.translate(this.x -26, this.y + 56);
                ctx.rotate(Math.PI * 0.17);
                ctx.translate(-this.x + 20, -this.y - 80);
                ctx.beginPath();
                ctx.moveTo(this.x, this.y + 30);
                ctx.lineTo(this.x - 26, this.y + 45);
                ctx.lineTo(this.x - 26, this.y + 75);
                ctx.lineTo(this.x, this.y + 90);
                ctx.lineTo(this.x + 26, this.y + 75);
                ctx.lineTo(this.x + 26, this.y + 45);
                ctx.lineTo(this.x, this.y + 30);
                ctx.moveTo(this.x - 20, this.y + 47);
                ctx.strokeStyle = "rgba(0,0,0,0.2)";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
                ctx.restore()
            }
        }
        init()
        draw()
    }
</script>
</body>
</html>

没画好画偏了
应该还要加算法来生成指定个数的
预览地址

~没有更多了~

关于作者

怪我入戏太深

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文