Javascript 生成具有坐标的图像

我希望你能帮我想办法解决我的问题

我想建立一个在线learningtyp测试，如下所示：

问题是德语，脚本是用JS编写的。 我几乎了解了所有内容，以及这个脚本的作者是如何通过构建问题并将其可视化来解决这个部分的。现在我不明白的是，他如何能够使用userinput，来可视化userinput。用户输入用于在坐标系中生成4个点

如何在PHP或JS中实现这一点

例如，14、4、5、20是用户输入，然后从js传输到result.php

现在你可以看到这张图片的例子

---

您可以参考我可以用来解决这个问题的php或js吗？

我认为您应该尝试使用ready解决方案。 例如：。 这可能会有帮助

他如何使用userinput来可视化userinput

如果查看HTML，您将看到：

<input type="checkbox" name="yes80" value="P" onclick="onoff(80,yes80,no80)">

及

每个复选框都会给出A、p、R或T的值。 JavaScript只是在复选框中循环，将所有的A、P、R和T相加，然后将这些值传递到php代码中。

Dmitry

非常感谢您的贡献

@杰夫

我不知道的是这些值是如何用来画这个坐标系的。是否有一个php函数可以绘制图片并将值用作点

@m、 德米特里

有没有可能让雷达看起来像一个坐标系，有两个轴

我想如果我只定义4个标签，它应该是这样画的

---

谢谢

您可以尝试使用SVG实现这一点。（）

为了方便起见，我将尝试根据图纸解释我的想法：

紫色区域是svg容器本身

蓝色区域是div容器

例如，橙色区域是相对于紫色svg容器中心的对称多边形

黄色多边形是可以通过输入更改的元素

svg系统的起点位于左上角

（0,0）

，如图1所示。 由于您希望将图形保持在

中心

，因此坐标将具有

宽度的一半

，高度的一半

基本上，你将有这个

（x，y）

坐标按顺时针顺序排列

• 顶部：x/2，输入
• 右：输入，y/2
• 底部：x/2，输入
• 左：输入，y/2

如你所见，顶部和底部是相同的，不同的是中心线，在它上面或后面，如图2所示。我们没有

x

和

y

轴，因此我们使用现有的

宽度
和
高度
，因此所有计算都将与
W
和
H
相关。如图3所示，右侧和左侧相对于蓝线，如果输入小于
x/2
，则点位于左侧


让svgElement=document.getElementById（“mySvg”）
设svgWidth=svgElement.getAttribute（“宽度”）；
设svgHeight=svgElement.getAttribute（“高度”）；
//x，y | x，y | x，y | x，y
//点：svgWidth/2，输入，svgHeight/2 svgHeight/2，输入，svgHeight/2
document.getElementById（“newSvg”）.addEventListener（“单击”，函数（）{
让topValue=document.getElementById（“top”）.value；
让rightValue=document.getElementById（“right”）.value；
让bottomValue=document.getElementById（“bottom”）.value；
让leftValue=document.getElementById（“left”）.value；
设svgNewPoints=svgWidth/2+，“+topValue+”“+rightValue+”，“+svgHeight/2+”“+svgHeight/2+”，“+bottomValue+”“+leftValue+”，“+svgHeight/2
console.log（svgNewPoints）
document.getElementById（“myPolygon”）.setAttribute（“点”，svgNewPoints）；
});
#conatainer{
宽度：350px；
高度：350px；
背景色：#3458eb；
}
#mySvg{
背景色：#4b3a8c；
}
.警告{
颜色：红色；
} 
.textAxis{
颜色：白色
}

Y
X
顶部
小于高度/2
赖特
大于宽度/2
底部
大于高度/2
左边
小于宽度/2
调整大小
请阅读。关于问题的哪一部分确实需要帮助，你在这里是非常不具体和模糊的。生成图像？确定在何处绘制的正确坐标…？
<input type="checkbox" name="yes80" value="A" onclick="onoff(80,yes80,no80)">