У меня есть HTML / JavaScript SPA, который сильно зависит от HTML5 canvas.SPA показывает прокрутку графика в реальном времени на экране, и он очень плавный, приближаясь к 60 кадрам в секунду на стандартном ПК.
Основной цикл в основном рисует график на холсте.Я обнаружил, что прокрутка графика путем перерисовки его на 1 пиксель влево снова и снова обходится дорого.Поэтому я использовал аппаратное ускорение графического процессора, переместив весь холст на 1 пиксель влево, используя
// shift canvas on the left by 1 pixel
myCanvasCtx.drawImage(myCanvas, -1, 0);
, а затем нарисовав только последний столбец пикселя с помощью JavaScript
. Это прекрасно работает в браузерах, которыеподдерживает ускорение GPU.Теперь я хотел бы сказать, является ли эффект прокрутки на самом деле аппаратным ускорением, посмотрев на страницу chrome://gpu, которая показывает список возможностей графического процессора:
Список сильно варьируется от браузера к браузеру.Что я должен искать, чтобы убедиться, что эффект прокрутки на самом деле аппаратно ускорен?(учитывая функцию drawImage (), которую я использую).Мое первое предположение - «Холст» и «Растеризация», но я не знаю, должны ли быть доступны оба или только один из них или что еще