Canvas布局定位咨询：h1层级调整、斜矩形实现及响应式建议

我来逐个帮你拆解并解决这三个问题：

1. 让h1元素显示在Canvas上层 #

目前你的代码有两个关键问题导致h1被Canvas遮挡：

• Canvas的id错误地写了#particles-js——HTML元素的id不需要带#，应该改成id="particles-js"，否则后续用JS操作Canvas会找不到元素。
• 承载h1的.homepage容器没有建立正确的层级上下文。Canvas用了position: absolute和z-index: 0，但你的.mainWrapper的position: relative被注释了，这会让Canvas相对于整个页面定位，而.homepage没有定位属性，无法突破Canvas的层级。

修改方案：

1. 修复Canvas的ID：

<canvas id="particles-js" width="1000" height="500"></canvas>

2. 启用.mainWrapper的相对定位，并给.homepage设置层级：

.mainWrapper { position: relative; }
.homepage {
  position: relative;
  z-index: 1; /* 只要数值大于Canvas的z-index:0即可 */
}

这样.homepage里的所有内容（包括h1）都会稳稳地显示在Canvas上层。

2. 黑白倾斜矩形：优先用CSS实现 #

绝对推荐用CSS而不是叠加Canvas，理由很充分：

• 开发效率高：只用transform: skew()就能实现倾斜效果，不用写Canvas绘图的复杂代码，后期改样式也更省心。
• 响应式更好适配：CSS变换可以配合媒体查询轻松调整倾斜角度或尺寸，Canvas则需要监听窗口resize事件重新绘制，逻辑繁琐。
• 性能更优：CSS变换属于GPU加速属性，比Canvas重复绘制的性能开销小很多。

实现示例（假设你要黑色倾斜矩形，文字保持正立）：

.blk-box .block {
  transform: skew(-12deg); /* 调整倾斜角度，负数左斜，正数右斜 */
  background-color: #000; /* 白色矩形就改成#fff */
  margin: 1rem 0;
  padding: 0.5rem 1rem;
}
.blk-box .block h1 {
  transform: skew(12deg); /* 反向倾斜，让文字恢复正立 */
  margin: 0;
  color: #fff; /* 黑色矩形配白色文字更醒目 */
}

除非你需要矩形有复杂的动态动画（比如随交互变形），否则完全没必要用Canvas来做这个效果。

3. 响应式设计优化建议 #

你当前用<table>实现左右分栏，在响应式场景下灵活性极差，结合你的需求，给出以下优化方向：

（1）替换Table布局为Flexbox/Grid #

用Flexbox实现左右分栏，小屏幕自动切换为上下排列，代码更简洁：

<!-- 替换原有的table结构 -->
<div class='homepage'>
  <div class="page-row">
    <!-- Left Side -->
    <div class="page-col left-col">
      <div class='mainPage'>
        <div class="blk-box">
          <div class="block">
            <h1>Barqawi</h1>
          </div>
          <div class="block">
            <h1>Maroun</h1>
          </div>
          <div class="block">
            <h1>Grey</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- Right Side -->
    <div class="page-col right-col">
      <div class='mainPage'>
        <div class="rightbox">
          <p id="jrdev">Jr Software Developer</p>
          <div class="portfolioBtn">
            <!-- 按钮内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

对应的CSS：

.page-row {
  display: flex;
  flex-wrap: wrap; /* 小屏幕自动换行 */
}
.page-col {
  flex: 1 1 50%; /* 桌面端各占50%宽度 */
  padding: 1rem;
}
/* 屏幕小于768px时，两栏上下排列 */
@media (max-width: 768px) {
  .page-col {
    flex: 1 1 100%;
  }
}

（2）修复Canvas的响应式变形 #

当前Canvas的width和height是固定值，窗口缩放时会导致内容拉伸变形。用JS监听窗口resize，动态设置Canvas的实际宽高：

const canvas = document.getElementById('particles-js');
function resizeCanvas() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  // 如果你的Canvas有粒子动画，这里需要重新初始化动画实例
}
// 初始化执行一次
resizeCanvas();
// 监听窗口尺寸变化
window.addEventListener('resize', resizeCanvas);

同时保持CSS里的Canvas样式：

canvas{
  width:100%;
  height:100vh; /* 占满视口高度，也可以根据容器调整 */
  position:absolute;
  top:0;
  left:0;
  background-image: linear-gradient(to bottom right, red, #380000);
  z-index: 0;
}

（3）调整文字与容器的响应式尺寸 #

• h1的font-size:10em在小屏幕下会溢出，用媒体查询逐步缩小：

h1 {
  text-align: left;
  font-size: 10em;
}
@media (max-width: 1200px) {
  h1 { font-size: 7em; }
}
@media (max-width: 768px) {
  h1 { font-size: 4em; }
}
@media (max-width: 480px) {
  h1 { font-size: 2.5em; }
}

• .rightbox的padding: 0 40%在小屏幕下会让内容太窄，修改为自适应内边距：

.rightbox{
  padding: 0 1rem; /* 小屏幕用小内边距 */
  max-width: 600px;
  margin: 0 auto; /* 内容居中 */
}
@media (min-width: 768px) {
  .rightbox{
    padding: 0 40%;
  }
}

（4）利用Bootstrap栅格（可选） #

既然你引入了Bootstrap，直接用它的栅格系统可以快速实现响应式分栏，省去自定义媒体查询：

<div class='homepage container-fluid'>
  <div class="row">
    <!-- Left Side -->
    <div class="col-md-6">
      <div class='mainPage'>
        <!-- 左侧内容 -->
      </div>
    </div>
    <!-- Right Side -->
    <div class="col-md-6">
      <div class='mainPage'>
        <!-- 右侧内容 -->
      </div>
    </div>
  </div>
</div>

Bootstrap会自动在屏幕小于768px时让两栏上下排列，非常省心。

内容的提问来源于stack exchange，提问作者Maroun