Javascript 将列表转换为可缩放的多边形_Javascript_Css_Html_Canvas_Html5 Canvas

Javascript 将列表转换为可缩放的多边形

javascript css html canvas html5-canvas

Javascript 将列表转换为可缩放的多边形,javascript,css,html,canvas,html5-canvas,Javascript,Css,Html,Canvas,Html5 Canvas,我用过乳胶，尤其是tikz。使用这个，我能够创建如下所示的图像下面的简短代码用于创建图像 \documentclass[tikz]{standalone} \begin{document} \usetikzlibrary{shapes.geometric} \usetikzlibrary{backgrounds} \begin{tikzpicture}[background rectangle/.style={fill=black}, show ba

我用过乳胶，尤其是tikz。使用这个，我能够创建如下所示的图像

下面的简短代码用于创建图像

\documentclass[tikz]{standalone}
\begin{document}
\usetikzlibrary{shapes.geometric}
\usetikzlibrary{backgrounds}

\begin{tikzpicture}[background rectangle/.style={fill=black},
                    show background rectangle]

\def\pages{
Home, 
Events,
Pictures,
Video, 
Contact,
About, 
Map
}

\def\ngon{7}

\node[regular polygon,regular polygon sides=\ngon,minimum size=3cm] (p) {};

\foreach\page [count=\x] in \pages{\node[color=white, shift={(\x*360/7+35:0.4)}] (p\x) at (p.corner \x){\page};}

\foreach\i in {1,...,\numexpr\ngon-1\relax}{
  \foreach\j in {\i,...,\x}{
    \draw[thin, orange, dashed] (p\i) -- (p\j);
  }
}
\end{tikzpicture}

\end{document}

在过去的几个小时里，我尝试使用“HTMLæ”、“CSS”和“Javascript”重新创建相同的图像。我使用“canvas”元素来绘制线条，但是我遇到了一系列问题，如下图所示

这是用下面的代码制作的。我尽我所能尽量减少代码。代码可以在帖子的底部找到。该代码有以下问题

可伸缩性。图像中的文本与页面“正文”中的文本不同
图像将隐藏正文中的其余文本
将文字置于图形外部的步骤是硬编码的
最后一个小问题是没有绘制列表中的第一个元素

我想解决上述问题，但我不确定如何继续。同样，我不赞成使用canvas（使用节点和元素可以获得更好的结果）。但是，输出应尽可能接近第一幅图像

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Canvas octagon</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            color:white;
            background:black;
        }

        canvas {
            display: block;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0;
            overflow: hidden;
            /*  Disable scrollbars */
            display: block;
            /* No floating content on sides */
        }
    </style>
</head>

<body>
    <canvas id="polygon"></canvas>
    <h2>more space</h2>
    <ol id="poly">
        <li>About</li>
        <li>Home</li>
        <li>Pictures</li>
        <li>Video</li>
        <li>Events</li>
        <li>Map</li>
        <li>Apply?</li>
        <li>Recepies</li>
    </ol>
some more text here
    <script>
        (function() {
            var canvas = document.getElementById('polygon'),
                context = canvas.getContext('2d');

            // resize the canvas to fill browser window dynamically
            window.addEventListener('resize', resizeCanvas, false);

            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                /**
                 * Your drawings need to be inside this function otherwise they will be reset when 
                 * you resize the browser window and the canvas goes will be cleared.
                 */
                drawStuff();
            }
            resizeCanvas();

            function drawStuff() {
                // do your drawing stuff here

                context.beginPath();
                context.translate(120, 120);
                context.textAlign = "center";

                var edges = document.getElementById("poly").getElementsByTagName("li");
                var sides = edges.length
                var angle = (Math.PI * 2) / sides;
                var radius = 50;

                context.save();
                for (var i = 0, item; item = edges[i]; i++) {
                    console.log("Looping: index ", i, "item " + item.innerText);
                    var start_x = radius * Math.cos(angle * i);
                    var start_y = radius * Math.sin(angle * i);
                    context.lineTo(start_x, start_y);

                    var new_x_text = 1.4 * radius * Math.cos(angle * i);
                    var new_y_text = 1.4 * radius * Math.sin(angle * i);
                    context.fillText(item.innerText, new_x_text, new_y_text);

                    context.strokeStyle = 'orange';
                    for (var j = 0; j < i; j++) {
                        var new_x = radius * Math.cos(angle * j);
                        var new_y = radius * Math.sin(angle * j);
                        context.moveTo(start_x, start_y);
                        context.lineTo(new_x, new_y);
                        console.log(new_x, new_y);
                    }

                    context.fillStyle = 'white'
                }

                var new_x = radius * Math.cos(0);
                var new_y = radius * Math.sin(0);
                context.lineTo(new_x, new_y);
                context.stroke();

            }
        })();
    </script>
</body>

</html>


帆布八角形
* {
保证金：0；
填充：0；
颜色：白色；
背景：黑色；
}
帆布{
显示：块；
}
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
边界：0；
溢出：隐藏；
/*禁用滚动条*/
显示：块；
/*侧面无浮动内容*/
}
更多空间
关于
家
照片
录像带
事件
地图
申请
收据
这里有更多的文字
（功能（）{
var canvas=document.getElementById（'polygon'），
context=canvas.getContext（'2d'）；
//调整画布大小以动态填充浏览器窗口
addEventListener（'resize'，resizeCanvas，false）；
函数resizeCanvas（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
/**
*您的图形需要位于该功能内，否则将在
*调整浏览器窗口的大小，画布将被清除。
*/
抽丝（）；
}
调整画布的大小（）；
函数drawStuff（）{
//你在这儿画画吗
context.beginPath（）；
语境。翻译（120120）；
context.textAlign=“中心”；
var edges=document.getElementById（“poly”）.getElementsByTagName（“li”）；
变量边=边。长度
变量角度=（Math.PI*2）/边；
var半径=50；
context.save（）；
对于（变量i=0，项；项=边[i]；i++）{
log（“循环：索引”，i，“项”+项.innerText）；
var start_x=半径*数学cos（角度*i）；
var start_y=半径*数学sin（角度*i）；
lineTo（开始x，开始y）；
var new_x_text=1.4*半径*Math.cos（角度*i）；
var new_y_text=1.4*半径*Math.sin（角度*i）；
context.fillText（item.innerText、new_x_text、new_y_text）；
context.strokeStyle='orange'；
对于（var j=0；j

使用画布渲染内容
首先，我要说的是，使用javascript将比使用诸如Latex之类的符号表示语言更长。它被设计成以最少的麻烦进行图形表示。使其工作的实际代码库是大量的，但对于一般用户来说是隐藏的
使用DOM
由于画布的内容存储在DOM中，因此最好在DOM中存储尽可能多的信息，颜色、字体等都可以存储在元素的数据集中
为此，我将设置放在有序列表中。它包含所有设置，但渲染函数中还有一组默认设置。elements数据集将覆盖默认值，或者您不能添加任何数据集属性并让其全部使用默认值
审查设置
在下面的例子中，我只提出了最低限度的审查。人们倾向于在DOM中的所有内容周围加引号，因为数字有时不能用字符串表示，我强制所有数字使用正确的类型。虽然为了安全起见，我应该检查它们是否确实是有效的数字，其他设置也是如此。我只是假设它们的格式是正确的
功能
所有的工作都在一个函数中完成，您向它传递查找列表和画布所需的查询字符串。然后，它使用列表项渲染到画布
相对尺寸
由于画布的大小并不总是已知的（可以通过CSS进行缩放），因此您需要有一些方法来指定与像素无关的大小。为此，我使用相对论
<!-- HTML -->
<div id="divElement" data-my-Value = "some data"></div>

<script>
    // the property of divElement is available as
    console.log(divElement.dataset.myValue); // output >> "some data"
</script>