gpt4 book ai didi

html - 在 HTML 中创建中心虚线

转载 作者:行者123 更新时间:2023-11-28 02:29:19 30 4
gpt4 key购买 nike

我正在玩乒乓球游戏,目前,为了设计,我试图在 Canvas 的中心创建一条垂直虚线,但我不知道如何在 HTML 中这样做. enter image description here

我目前的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>

希望对此有所帮助。

最佳答案


我不知道你是否会喜欢这个,但我建议,更改 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 - 在 HTML 中创建中心虚线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51984410/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com