Question

我的脚本正在画布上为日历计划应用程序渲染网格。日历的网格（以天为列）比屏幕大得多（宽度约2000px，高度约900px）。另外，在画布上方，已保留的日期由html块标记。

仅在初始化阶段绘制画布，稍后用户可以触摸并拖动以滚动日历和预留块。调整.calendar-viewport元素的滚动偏移量以进行滚动。

<div class="calendar-viewport"> // <-- this element's width is small, this element's scroll position is controlled
    <div style="width:2048px;position:relative"> /// <-- this element is scrolled, it contains the canvas and reservation blocks 
        <canvas width="2048px" height="876">
        <div class="reservationElement">Some name</div> //these elements are positioned in js relatively to the parent
        <div class="reservationElement">Some other name</div>
    </div>
</div>

It looks like this

一切在Android手机和笔记本电脑上都可以正常运行，但是在iPhone 8上，滚动动作是缓慢而缓慢的。

我正在考虑将整个网格缓冲到一个未连接的第二个画布中，然后在滚动过程中使用drawImage仅将所需的部分绘制到实际的画布中。从来没有尝试过，那样会加快滚动速度，还是这样的重画实际上会使我慢下来？有人尝试过吗？

您还有其他可用来加快滚动速度的想法吗？

加快iOS Safari中的Canvas渲染速度

0 个答案: