javascript - 无法在 Canvas 中旋转 Canvas

Question

我创建了主 Canvas 、canvas_panorama 和 canvas_image:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.id = 'canvas_parent';
canvas.width = 600; canvas.height = 300;
document.body.appendChild( canvas );

var canvas_panorama = document.createElement("canvas");
var canvas_panorama_ctx = canvas_panorama.getContext("2d");
canvas_panorama.height= 300; canvas_panorama.width= 600;

var canvas_image = document.createElement("canvas");
var canvas_image_ctx = canvas_image.getContext("2d");
canvas_image.height= 150; canvas_image.width= 150;

以及将内容绘制到 Canvas 中的函数:

 function redraw(){  
        canvas_image_ctx.drawImage(image_img, 0, 0, 150, 150);
        canvas_panorama_ctx.drawImage(panorama_img, 0, 0, 600, 300);
        canvas_panorama_ctx.drawImage(canvas_image, 20, 20);
        ctx.drawImage(canvas_panorama, 0, 0);
        canvas_image_ctx.rotate(angle);
  }
  redraw();

然后我检查 Canvas 是否正确并调用函数来获取新 Angular :

function getAngle( e, pw ){
      var offset = pw.offset();
      var center_x = (offset.left) + ($(pw).width() / 2);
      var center_y = (offset.top) + ($(pw).height() / 2);
      var mouse_x = e.pageX;
      var mouse_y = e.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      angle = (radians * (180 / Math.PI) * -1) + 180;
}

但是我无法旋转它，我需要将图像保留在特殊的 Canvas 中，因为我身后的下一个正在拖动它。
你不知道我做错了什么吗？
FIDDLE举例说明。

Answer 1

• clickAngle 未定义并抛出错误以阻止 要调用的 getAngle 函数。您必须先定义它，然后才能使用它
• 拼写错误 agetAngle 在您调用它的鼠标事件中应该是 getAngle。
• 然后 getAngle 函数具有弧度，但您需要将其转换为度数 然后使用 Angular (以度为单位)而不是弧度来调用重绘。所有 javascript API 使用弧度而不是度数..

这让它旋转 Canvas 。PS，当你有凌乱的代码时，总是很难看出错字在哪里。确保您的代码始终整洁，您将为自己省去无尽的麻烦。

开发工具还可以帮助您跟踪这些类型的错误。在浏览器上按 F12，这是程序员最好的 friend 。在代码中使用 console.log("this go to console") 查看代码正在执行的操作并将变量列出到控制台。