Javascript 仅旋转画布中的图像

我试图在画布内旋转图像

Here's my Fiddle: https://jsfiddle.net/kevinludwig11/s6rgpjm9/

我尝试使用save和restore，但路径也在旋转

猎鹰应该面朝天空飞行，并改变角落的角度

有人能帮我吗

编辑：我找到了一个解决方案：每次旋转时将图像保存360次，并将每个图像加载到正确的位置。但我认为这不是最明智的解决办法

画布2D图像注视变换。 无需创建360个图像即可旋转单个图像。你也有一些不正确的做事方式

代码问题

• 仅加载图像一次。每次渲染时都要加载它
• 单独使用requestAnimationFrame。把它放在计时器里，它的使用就完全多余了
• 如果您发现自己输入了一长串的数字，尤其是如果您在代码的其他部分重复这些数字，那么您应该使用单个存储来保存所有内容。你的路线都是手工编码的。将它们移动到一个数组中，然后迭代该数组，以获得需要对路径执行的各种操作。十大编程规则之一。“不要重复/复制任何内容。”

注视变换 要做这只鸟，你需要知道它的方向，所以我在曲线上加了第二个点，在鸟的前面。通过这两点（birds pos和lookat pos），我使用lookat方向作为转换的X轴创建了一个转换。请参见函数

drawImageLookat（图像，位置，注视）

我发现图像不沿X轴，因此在找到注视变换后，我将鸟旋转90度

注视函数 从小提琴演示。 您的代码，我从小提琴和修改，以运行您的问题暗示

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//仅加载一次图像
var birdImage=新图像（）；
birdImage.src=http://www.happy-innovation.de/images/Falke_Flug.png';
birdImage.onload=函数（）{animate（）}；//加载图像后启动动画
//设置起始值
var速度=0.25
var百分比=速度；
方向=速度；
变量长度=300；
函数animate（）{
setTransform（1,0,0,1,0,0）；//如果不是，则恢复默认转换
clearRect（0，0，canvas.width，canvas.height）；
百分比+=方向；
//需要保持位置远离末端，因为路径之外没有视线。
如果（百分比>=长度-速度）{
百分比=长度-速度；
方向=-速度；
}否则如果（百分比=i*50和滑动值<（i+1）*50）{
getPos=true；
百分比=（滑动值%50）/50；
}   
如果（滑动值+方向>=i*50和滑动值+方向<（i+1）*50）{
getForwardPos=true；
百分比1=（（滑动值+方向）%50）/50；
}
如果（p.长度>3）{
c.Bezier曲线（p[1].x，p[1].y，p[2].x，p[2].y，p[3].x，p[3].y）；
if（getPos）{
birdPos=getCubicBezierXYatPercent（p[0]，p[1]，p[2]，p[3]，percent）；
getPos=false；
}
如果（getForwardPos）{
Birdlookapos=getCubicBezierXYatPercent（p[0]，p[1]，p[2]，p[3]，percent1）；
getForwardPos=false；
}
}否则{
二次曲线（p[1].x，p[1].y，p[2].x，p[2].y）；
if（getPos）{
birdPos=getQuadraticBezierXYatPercent（p[0]，p[1]，p[2]，percent）；
getPos=false；
}
如果（getForwardPos）{
Birdlookapos=getQuadraticBezierXYatPercent（p[0]，p[1]，p[2]，percent1）；
getForwardPos=false；
}
}
ctx.stroke（）；
}
drawImageLookingAt（鸟笼、鸟笼、鸟笼）；
}
函数drawImageLookingAt（图像、点、注视）{
如果（lookat==未定义）{//如果没有lookat，则退出，否则将崩溃。
返回；
}
var xAx，xAy；//图像x轴的向量
变量x，y；
x=注视点x-点x；
y=注视点y点y；
var dist=Math.max（0.01，Math.sqrt（x*x+y*y））；//Math.max避免将创建NaN的零
xAx=x/dist；//获取x轴的x分量
xAy=y/dist；//获取x轴的y分量
//y轴为90度，因此不需要y轴矢量
setTransform（//使用transform定位图像
xAx，xAy，//设置x轴的方向
-xAy，xAx，//设置y轴方向
点x，点y
);   
//鸟指向错误的方向。不是沿着x轴
//因此，将图像顺时针旋转90度
ctx.旋转（数学PI/2）；
ctx.drawImage（image，-image.width/2，-image.height/2）；
setTransform（1,0,0,1,0,0）；//如果只使用setTransform进行转换，则实际上不需要还原默认值
//但如果使用变换、旋转、平移或缩放，则需要重置
//转变。
}
//行：百分比为0-1
函数getLineXYatPercent（开始、结束、百分比）{
var dx=endPt.x-startPt.x；
变量dy=结束点y-开始点y；
var X=起始时间X+dx*百分比；
变量Y=起始时间Y+dy*百分比；
返回({
x:x，
y:y
});
}
//二次贝塞尔：百分比为0-1
函数getQuadraticBezierXYatPercent（起始点、控制点、结束点、百分比）{
var x=数学功率（百分之一，2）*起始功率x+2*（百分之一）*百分比*控制功率x+数学功率（百分之一，2）*结束功率x；
变量y=数学功率（1%，2）*起始功率y+2*（1%）*百分比*控制功率y+数学功率（百分比，2）*结束功率y；
返回({
x:x，
y:y
});
}
//立方贝塞尔百分比为0-1
函数getCubicBezierXYatPercent（开始、控制pt1、控制pt2、结束、百分比）{
var x=CubicN（百分比，起始点x，控制点1.x，控制点2.x，结束点x）；
变量y=CubicN（百分比，开始时间y，控制时间1.y，控制时间2.y，结束时间。
// function assumes front (forward) of image is along the x axis to the right
function drawImageLookat(image, point, lookat ) {
    var xAx,xAy; // vector for x Axis of image
    var x,y;
    x = lookat.x - point.x;
    y = lookat.y - point.y;
    var dist = Math.max(0.01,Math.sqrt(x * x + y * y)); // Math.max to avoid zero which will create NaN
    xAx = x / dist; // get x component of x Axis
    xAy = y / dist; // get y component of x Axis
    // y axis is at 90 deg so dont need y axis vector
    ctx.setTransform(   // position the image using transform
        xAx, xAy, // set direction of x Axis
        -xAy, xAx, // set direction oy y axis
        point.x, point.y
    );   
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
}