javascript - 无法在 Canvas 中旋转 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;

并将功能绘制到画布中的功能：

 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();

然后我检查画布是否正确，并调用函数以获取新角度：

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;
}

但是我无法旋转它，我需要将图像保留在特殊的画布中，因为接下来我要拖动它。
你不知道我在做什么错吗？
FIDDLE示例。

最佳答案

clickAngle是未定义的，会引发错误，导致无法
调用getAngle函数。您必须先定义它，然后才能使用它
在调用鼠标的事件中，Typo agetAngle应该为getAngle。
然后getAngle函数具有弧度，但是您可以转换为度
然后使用角度（以度为单位）而不是弧度调用重绘。所有javascript API的使用弧度而不是度。


这使它旋转了画布。.PS总是很难看到当您的代码混乱时错别字在哪里。通过确保您的代码始终保持整洁，您将节省无尽的麻烦。

开发工具还可以帮助您跟踪这些类型的错误。在浏览器中按F12键以找到程序员的最好朋友。在代码中，使用console.log("this goes to console")查看您的代码在做什么，并在控制台中列出变量。