Question

我目前正试图找到一种方法让图像在旋转时在页面周围弹跳。到目前为止，我已经成功完成了弹跳部分：The code in action。但是，我仍在努力解决旋转部分：The source code。我认为这个问题与旋转图像数据有关。我已经对旋转的画布数据进行了大量的研究，但是我仍然没有找到错误。任何人都可以阐明这个谜团。

顺便说一下，我知道在将图像插入画布之前预先加载每个图像可以大大提高滞后性，但是我不想让代码过于复杂，直到我得到基本的布局-man版本工作。所以现在我已经对此进行了检查，请不要发布它，因为它并不完全是主题。

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

修改

链接已移至显示的最终产品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画布旋转Uint8ClampedArray图像数据

修改

1 个答案: