使用 html canvas 旋转 Uint8ClampedArray 图像数据

Question

我目前正在尝试寻找一种方法让图像在旋转时在页面上跳来跳去。至此，弹跳部分成功：The code in action. However, I am still struggling with the rotating part: The source code。我相信这个问题与旋转图像数据有关。我已经对旋转 canvas 数据进行了大量研究，但是这个错误仍然困扰着我。谁能揭开这个谜团。

顺便说一下，我知道在将图像插入 canvas 之前预加载每个图像可以大大改善延迟，但我不想让代码过于复杂，直到我可以让基本的外行版本开始工作。所以既然我已经检查过了，请不要 post 因为它不完全是主题。

我的第二个小问题是：我观察到，在 Google Chrome 中，当我将帧速率修改为 60 fps 以外的任何值时，性能会大幅下降: 59 fps 或 60-Math.pow(2,-16) fps 看起来比 60 fps 慢很多。我知道这不可能是因为在我的显示器上显示速率，因为我的显示器的显示速率是 59 fps，而不是 60 fps。那么，是因为 Google Chrome 识别并优化了 1000/60，还是什么？如果可能，请在文档中包含 link。

编辑

已将 link 移动到显示的最终产品中 here.

Answer 1

没有旋转 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);

使用 html canvas 旋转 Uint8ClampedArray 图像数据

Rotating the Uint8ClampedArray image data using a html canvas

html5-canvas

transform

image-rotation

frame-rate

uint

编辑