Question

这是我的代码：

   socket.on('newPositions', function(data) {
     ctx.clearRect(0, 0, 1500, 1000);
     for (var i = 0; i < data.length; i++) {
       var img = document.getElementById("player");
       var rotation = -(Math.atan2(data[i].x - event.clientX, data[i].y - event.clientY) * 180 / Math.PI);
       //ctx.drawImage(img, data[i].x, data[i].y, 89, 275);
       ctx.save();
       ctx.translate(data[i].x + 89 / 2, data[i].y + 275 / 2);
       ctx.rotate(rotation);
       ctx.translate(-data[i].x + 89 / 2, -data[i].y + 275 / 2);
       ctx.drawImage(img, data[i].x, data[i].y);
       ctx.restore();
     }
   });

如果有人能帮助我找到解决办法，我会非常感激，因为我不知道此时有什么问题：）

Answer 1

旋转是弧度。请参阅： http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/

试图在JavaScript画布上按鼠标指针的方向旋转图像？

1 个答案: