Question

我正在开发一个乒乓球游戏，目前，为了进行设计，我正在尝试在画布中央创建一条垂直虚线，但我不知道如何在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>

希望对此有所帮助。

Answer 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>

我知道它看起来笨拙，并不完美，但是它可以工作，而且很简单，谢谢。

在HTML中创建中心虚线

1 个答案: