Вращение данных изображения Uint8ClampedArray с использованием холста html

В настоящее время я пытаюсь найти способ, чтобы изображения прыгали по странице при вращении. До сих пор мне удавалось прыгать: Код в действии. Однако я все еще борюсь с вращающейся частью: исходный код. Я считаю, что проблема как-то связана с вращением данных изображения. Я тщательно изучил вращающиеся данные холста, но ошибка все еще ускользает от меня. Может ли кто-нибудь пролить свет на эту тайну.

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

Мой второй меньший вопрос заключается в следующем: я заметил, что в Google Chrome, когда я изменяю частоту кадров на что-либо, кроме 60 кадров в секунду, происходит ОГРОМНОЕ снижение производительности: 59 кадров в секунду или 60-Math.pow(2,- 16) fps кажется намного медленнее, чем 60 fps. Я знаю, что этого не может быть, потому что на моих мониторах скорость отображения, потому что скорость отображения моего монитора составляет 59 кадров в секунду, а не 60 кадров в секунду. Так это потому, что Google Chrome распознает и оптимизирует 1000/60, что ли? Если возможно, укажите ссылку на документацию.

РЕДАКТИРОВАТЬ

Ссылки были перенесены на конечный продукт, отображаемый здесь.


html5-canvas transform frame-rate image-rotation uint
person Jack Giffin    schedule 27.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нет собственного способа повернуть Uint8ClampedArray

Чтобы повернуть изображение после его загрузки.

// ctx is the 2D context. Image is drawn at its center point.
function drawRotated(image,x,y,scale,rot){
   ctx.setTransform(scale,0,0,scale,x,y); // set scale and origin
   ctx.rotate(rot);
   ctx.drawImage(image, -image.width /2, -image.height / 2);
   ctx.setTransform(1,0,0,1,0,0); // restore default transformation
}

Я совсем не уверен, что вы говорите о частоте кадров. Монитор с частотой кадров 59 очень непривычен. Поскольку вы не показали, что делаете, я предполагаю, что вы не используете requestAnimationFrame

Следующее будет синхронизироваться с частотой обновления браузера.

function mainLoop(){
    // code to render the frame   

    requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);
person Blindman67    schedule 27.11.2016
comment
Большое спасибо, я верю, что вы решили мою проблему. - person Jack Giffin; 27.11.2016
comment
Кроме того, кстати, это не совсем так, скажем, частота кадров 59 кадров в секунду для монитора, а частота кадров 59 кадров в секунду, отправляемая на монитор в соответствии со свойствами монитора в панели управления Windows. - person Jack Giffin; 27.11.2016