Question

我有一个画布，其中心是使用context.translate移动的正方形。但是，它会缩放画布，因此无论屏幕大小如何，用户始终可以看到一定数量的画布。但是，这具有引起滞后的奇怪副作用。经过一番调查，仅当屏幕尺寸的两个尺寸中的任何一个大于它们可以看到的场景量时，即ctx.scale的两个参数中的任何一个都大于1时，才会发生延迟。例如，我设置canvasWidth到1000。如果window.innerWidth大于该值，则会发生滞后。以下是代码的一部分，负责缩放和转换。

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"   aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="text" class="col-form-label">firstname:</label>
        <input class="form-control" id="text2"></input>

       </div>
       <label for="text" class="col-form-label">lastname:</label>
        <input class="form-control" id="text2"></input>
   </form>
      </div>
     <div class="modal-footer">
     <button type="button" class="btn btn-secondary" data-  dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">submit</button>
  </div>
</div>

我在谷歌搜索时找不到关于此的任何信息，因此，我想知道为什么会发生这种情况以及如何解决它，谢谢。

放大画布会导致延迟

0 个答案: