canvas 旋转一个元素

//配合图片理解
//需要参数
let c_left = 100  // x
let c_top = 100   // y
let d_with = 100  // 元素宽
let d_height = 100  // 元素高
let a = 45      // 元素旋转角度



ctx.save()     // 先保存画布
//一定要以中心点计算 （这里一开始是按照左上位置  旋转不同角度 老是偏移）
let left = c_left  + d_with/2   //中心点位置
let top = c_top  + d_height/2

ctx.rotate(a*Math.PI/180);//旋转画布
		
//这里是计算角度（deg）
var result = Math.atan(top/left) / (Math.PI / 180); //这个是a+deg
result = Math.round(result);
let deg = result - a  //获得deg

//通过横纵坐标获取长度
let leng = Math.sqrt(Math.pow(left,2) + Math.pow(top,2))
// 再通过角度  获取新的横纵坐标
let  x = Math.round(leng * Math.cos(deg*Math.PI/180)) - d_with/2;
let  y = Math.round(leng * Math.sin(deg*Math.PI/180)) - d_height/2;
				
//画图  这里是封装的方法  换成自己的即可
_canvas.drawCircular(ctx, logo.path,x,y,d_with,d_height); 
//还原画布
ctx.restore();

原理 ：旋转画布后 产生新的坐标系 通过原先的坐标点和旋转角度 在新的坐标系中 重新获取横纵坐标