代码之家 › 专栏 › 技术社区 › Maxxx

在HTML中创建中心虚线

html5-canvas svg html

Maxxx · 技术社区 · 7 年前

我正在做一个乒乓球游戏,目前,为了一个设计,我试图在画布的中心创建一条垂直的虚线,但我不知道如何在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>

希望能得到一些帮助。

1 回复 | 直到 7 年前

Jithin Raj P R 7 年前

我不知道你是否会喜欢这个,但我建议,改变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>

我知道它看起来很笨拙,不完美,但它很有效,很简单, 谢谢您。

推荐文章

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

2 年前

Mykyta_GloryToUkraine · JS drawImage作为类中的方法

3 年前

TheTechy · 从多维数组为HTML5平铺图生成冲突对象

7 年前

Joni dep · JavaScript画布drawImage工作不正常[重复]

7 年前

DaFudgeWizzad · 如果形状超出了javascript画布的范围,如何剪切形状?

7 年前

Bestlogo56 · 我随机生成的平铺集未按预期工作。我怎样才能解决这个问题?

7 年前

John Ackerman · 绘制点的路径html画布

7 年前

Jaan · Fabricjs对象在完成时移动火

7 年前

Tareq Jami · 使用鼠标(坐标系)放大我的canva

7 年前

PiggMiner · 为什么我的代码不能将所有内容都绘制到画布上?

7 年前