修改“；外来偏差”；钢笔--HTML画布的问题

摘要

在我的屏幕底部有一个不合适的矩形红色框

背景

使用Chrome的开发者工具在我本地的开发者工作区，我已经指出了问题的根源，一个相对新引入的画布元素，我不完全理解。我已经研究过了，但我真的不明白在这种情况下如何正确使用canvas元素

我的代码

以下是HTML：

 <div class="title">

<!-- Original concept borrowed from Marco Dell'Anna in a CodePen titled ALIEN - Deviation of microcosm, source: https://codepen.io/plasm/pen/JNPXxg  -->

<h1>LOREM IPSUM</h1>

<h3><a href="#">@ hyperlink 1</a></h3> 

<h3><a href="#">@ hyperlink 2</a></h3> 

<h3><a href="#">@ hyperlink 3</a></h3> 

<h3><a href="#">@ hyperlink 6</a></h3> 

  <br />
   <br />
    <br />

<h3><a href="#">~ hyperlink  @ random ~</a></h3> 
</div>

我相信这个问题不是JavaScript特有的

实际/预期结果

实际解析的HTML和CSS在窗口/屏幕底部显示一个红色（深红色）矩形框。这个问题在更狭隘的决议中更为明显。您可能需要减小web浏览器的宽度，并向下滚动鼠标滚轮以查看我所指的问题。我希望我的网页不会出现红色矩形框

你会如何解决这个问题？删除此红色框可能需要哪些属性或值

我知道我看到的是矩形，因为title类没有达到屏幕的全部高度，所以剩下的是body元素。但我不知道如何纠正这一点

---

再次。就它的价值而言，

深红是红色的改变背景：深红；你想要什么背景颜色都行

增加：

更改.title的这一部分

.title {
   padding: 50px 30px;
}

到

只有当滚动条出现在浏览器上时，我才能复制它。您将画布的高度设置为可见视口，而不是整个视口高度。滚动浏览器窗口时，画布将向上滚动以显示间距

将CSS.canvas部分中的position:absolute更改为position:fix

canvas {
   position : fixed;
}

---

深红是红色变化背景：深红；你想要什么背景颜色都行

增加：

更改.title的这一部分

.title {
   padding: 50px 30px;
}

到

只有当滚动条出现在浏览器上时，我才能复制它。您将画布的高度设置为可见视口，而不是整个视口高度。滚动浏览器窗口时，画布将向上滚动以显示间距

将CSS.canvas部分中的position:absolute更改为position:fix

canvas {
   position : fixed;
}

---

因为我不确定除了移除红色框之外，你还想实现什么

删除您的

标题

课程或对其进行调整

---

因为它的css属性按照最初的例子是为了集中较短的内容。根据他们的需求，调整css代码以满足您的需求。如果希望将文本设置在固定位置，您也可以删除

title

类的其他属性，然后离开

position:absolute

。

，因为除了删除红色框，我不确定您想要实现什么

删除您的

标题

课程或对其进行调整

---

因为它的css属性按照最初的例子是为了集中较短的内容。根据他们的需求，调整css代码以满足您的需求。如果希望将文本设置在固定位置，您也可以删除

title

类的其他属性，然后只保留

位置：绝对

。

在CSS中body元素内的第35行，如果我将颜色从“深红色”更改为“黄色”或“绿色”甚至“无”，矩形不会消失。该框只是改变颜色（同时仍然干扰内容文本）。请看这里：想法是将深红色改为深蓝色，以匹配画布背景中的颜色。我已经添加了更多的信息来删除填充，如果这样对你更好的话。如果我们将背景更改为深蓝色，你是对的，矩形框变得更难看到。但是背景需要是动态的，带有JavaScript呈现的扭曲的红线。按照您的建议更改主体背景颜色并不能真正解决问题，因为主体背景仍然覆盖动画的曲线。我添加了

填充：50px30px0px30px

到.title元素，该元素也不会删除矩形框。添加了关于位置的位：fixedThanks，John！将

fixed

值添加到

.canvas

类中的

position

属性中，成功了！谢谢。在CSS中body元素的第35行，如果我将颜色从“深红色”更改为“黄色”或“绿色”，甚至更改为“无”，矩形不会消失。该框只是改变颜色（同时仍然干扰内容文本）。请看这里：想法是将深红色改为深蓝色，以匹配画布背景中的颜色。我已经添加了更多的信息来删除填充，如果这样对你更好的话。如果我们将背景更改为深蓝色，你是对的，矩形框变得更难看到。但是背景需要是动态的，带有JavaScript呈现的扭曲的红线。按照您的建议更改主体背景颜色并不能真正解决问题，因为主体背景仍然覆盖动画的曲线。我添加了

填充：50px30px0px30px

到.title元素，该元素也不会删除矩形框。添加了关于位置的位：fixedThanks，John！将

fixed

值添加到

.canvas

类中的

position

属性中，成功了！谢谢你。你说得对，我所要做的就是去掉那个红色的盒子。当我将

位置

属性的值从

相对

交换到

绝对

（在CSS中的

.title h1

元素中）时，深红色矩形确实消失了。但是

h1

在页面中央，与

h3

重叠，这不是我想要的。无论如何，我已经采纳了你的其他建议来调整我的头衔等级。此后，我在HTML中使用了结尾.title分隔符，并将其移到了