• HTML

• JS

• CSS

  .hideCanvasView {
  position: relative;
  }

  .hideCanvas {
      position: fixed;
      top: -99999upx;
      left: -99999upx;
      z-index: -99999;
  }
  
  .flex_row_c_c {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  }
  
  .modalView {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      outline: 0;
      transform: scale(3);
      perspective: 2500upx;
      background: rgba(0, 0, 0, 0.6);
      transition: all .3s ease-in-out;
      pointer-events: none;
      backface-visibility: hidden;
      z-index: 999;
  }
  
  .modalView.show {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
  }
  
  .flex_column {
      display: flex;
      flex-direction: column;
  }
  
  .backgroundColor-white {
      background-color: white;
  }
  
  .border_radius_10px {
      border-radius: 10px;
  }
  
  .padding1vh {
      /* padding: 1vh; */
      padding-top: 20px;
  }
  .padding1vh2{
      padding-top: 20px;
      padding-bottom: 20px;
  }
  
  .posterImage {
      width: 80vw;
      height: 40vw;
  }
  
  .flex_row {
      display: flex;
      flex-direction: row;
  }
  
  .marginTop2vh {
      margin-top: 2vh;
  }

参考：https://ext.dcloud.net.cn/plugin?id=471

项目地址 ：https://dev.tencent.com/u/Coding-Neo/p/CanvasPoster/git