在 HTML 中创建中心虚线答案

【问题标题】：Creating a centre dotted line in HTML在 HTML 中创建中心虚线
【发布时间】：2019-01-29 18:01:39
【问题描述】：

我正在开发一款乒乓球游戏，目前，为了设计，我正在尝试在画布的中心创建一条垂直虚线，但我无法弄清楚如何在 HTML 中做到这一点.

我目前拥有的 HTML 代码是

<html>
<head>
    <style>
        @import url(style.css);
        p.highlight {
            color: red;
        }
        svg {
            background-color: rgb(41, 41, 36);
        }
    </style>
    <script src="svgelement.js"></script>
    <script src="observable.js"></script>
    <script src="pong.js"></script>
</head>
<body>
    <h1>Pong</h1>
    <svg id="canvas" width="600" height="600"/>

</body>

不胜感激。

【问题讨论】：

在画布上使用 html...？您将需要 JavaScript 来修改画布。 MDN 有一个关于如何使用 JavaScript here 在画布上绘制虚线的完美示例。
尽管有 svg 标签，但我假设您想使用 Javascript 画线？如果是这种情况，您需要将 svg 标签替换为 <canvas id="canvas" width="600" height="600" />。
顺便说一句，在我年轻的时候，我有一台飞利浦的乒乓游戏机，这在当时是一个真正的奇迹。我喜欢滑块。 pugo.org/collection/console/86
我认为所有的绘图都是在 JavaScript 中进行的，也许在 pong.js 中？你能分享那个代码吗？

标签： html svg html5-canvas

【解决方案1】：

我不知道您是否会喜欢这个，但我建议您更改 svg 标签，并使其变得简单，使用带有简单 CSS 的盒子模型或盒子形状。它看起来有点像这样：

.box {
  height: 500px;
  width: 800px;
  background-color: black;
  position: absolute;
  left: 280px;
  bottom: 50px;
}

.pong1 {
  height: 80px;
  width: 20px;
  background-color: grey;
  z-index: 1;
  position: absolute;
  left: 300px;
  bottom: 300px;
}

.pong2 {
  height: 80px;
  width: 20px;
  background-color: grey;
  z-index: 1;
  position: absolute;
  right: 300px;
  bottom: 300px;
}

.border:before {
  content: "";
  position: absolute;
  left: 425px;
  bottom: 294px;
  height: 10px;
  width: 36.7%;
  border-bottom: 3px dotted white;
  transform: rotate(270deg);
}

<div class="box"></div>
<div class="pong1"></div>
<div class="pong2"></div>
<div class="border"></div>

我知道它看起来很笨拙，并不完美，但它很有效，而且很简单，谢谢。

【讨论】：