Используйте двойной кеш для решения проблемы с заставкой, вызванной Canvas clearRect

Canvas

предисловие

Я столкнулся с проблемой заставки, когда сегодня использовал холст для создания H5. Эффект мерцания следующий:

Введение в проблему

Введение в функцию

Функция этой части H5 состоит в том, чтобы переключить маску изображения или изменить фон, щелкнув вторичное меню.

Потому что простая функция, поэтому мы используем исходный холст для достижения этой функции. Но используяclearRectМерцание происходит при очистке холста.

Реализация кода (проблемный код)

Следующий код является кодом ключа для заставки, опуская определение и загрузку изображения:

// 点击二级菜单后，触发该函数更新画布
updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获取画布
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1448,750); // 清空画布
    // 开始重绘
    ctx.drawImage(bg,0,0); // 背景
    ... // 省略其他绘制过程
}

анализ проблемы

После несложного анализа делается вывод, что причина появления заставки кроется вclearRectПосле очистки холста рисование занимает много времени, что приводит к явлению заставки.

Что такое двойной кеш

посмотриmicrosoftна сайтеграфика с двойной буферизациейВ этой статье объясняется двойное кэширование:

Мерцание является распространенной проблемой при программировании графики. Графические операции, требующие нескольких сложных операций рисования, могут привести к мерцанию визуализированного изображения или неприемлемому внешнему виду. Для решения этих проблем .NET Framework обеспечивает двойную буферизацию.

Двойной буфер использует буфер содержимого для решения проблемы мигания, связанной с несколькими операциями рисования. После включения двойного буфера все рисунки сначала будут отображаться в буфере памяти, а не на поверхности рисования на экране. После завершения всех операций рисования буфер памяти копируется непосредственно в связанный с ним раздел рисования. Поскольку на экране выполняется только одна графическая операция, изображение, связанное со сложной операцией рисования, может быть исключено.

Используйте двойную буферизацию для решения проблемы

Приведенная выше цитата, вкратце, основная проблема в том, что время рисования слишком велико, что приводит к заставке.Решение состоит в том, чтобы создать новый холст каккеш холст,пройти черезкеш холстЗавершите процесс рисования, после того как рисунок будет завершен, непосредственнокеш холстСкопируйте его на исходный холст, чтобы можно было решить проблему с заставкой, вызванную слишком длительным временем рисования.

Код

Следующий код является кодом ключа, без определения и загрузки изображения:

updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获取页面中的 canvas
    const ctx = canvas.getContext('2d');
    
    const tempCanvas = document.createElement('canvas'); // 新建一个 canvas 作为缓存 canvas
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1448; tempCanvas.height = 750; // 设置宽高

    // 开始绘制
    tempCtx.drawImage(bg,0,0); // 背景
    ... // 省略其他绘制过程
    
    // 缓存 canvas 绘制完成
    
    ctx.clearRect(0,0,1448,750); // 清空旧 canvas
    ctx.drawImage(tempCanvas,0,0); // 将缓存 canvas 复制到旧的 canvas
}

Принятие эффекта

Хорошо видно, что проблема с заставкой решена!

Суммировать

  • При перекраске холста нам нужно использоватьclearRectЧтобы очистить холст, холст в это время пуст.После начала перерисовки, если контента много, время соответственно увеличится, поэтому есть визуальный разрыв, и мы видим ситуацию заставки;
  • Решение экрана-заставки на самом деле является решением проблемы длительного времени рисования;
  • Вот ссылка на программирование графики и обработки изображенийдвойной кешконцепции, передавая процесс рисованиякеш холстТаким образом, Canvas на этой странице сохраняет процесс рисования, акеш холстОн не добавляется на страницу, поэтому мы не можем видеть процесс рисования, что решает проблему заставки.

Ссылка на ссылку

больше статей

Категории