Javascript 如何在HTML画布中转换整个函数？

我想把一只狗的头部变换成旋转，但我不知道如何选择一个完整的函数，而不是更多的函数，并将其变换成动画

// The function
Head();

rotate();
// this is for the entire canvas, but how to do it specifically for a function
context.rotate(rotation);

rotation += 0.04

我也不太熟悉html画布中的动画

在转换之前，您需要

保存（）

上下文。接下来调用绘制头部的函数。然后您

restore（）

上下文。以这种方式，头部将被转换为画布的其他部分

const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=canvas.width=300，
cx=cw/2；
设ch=canvas.height=300，
cy=ch/2；
让旋转=0
函数背景（）{
ctx.beginPath（）；
ctx.fillStyle=“黄金”；
ctx.fillRect（20,20160,50）；
ctx.beginPath（）；
ctx.fillStyle=“黄金”；
ctx.fillRect（120220160,50）；
}
职能主管（）{
ctx.fillStyle=“天蓝色”；
ctx.beginPath（）；
ctx.arc（0,0,40,0,2*Math.PI）；
ctx.fill（）；
ctx.beginPath（）；
ctx.arc（-15，-5,8,0,2*Math.PI）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.beginPath（）；
ctx.arc（15，-5,8,0,2*Math.PI）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.beginPath（）；
ctx.arc（0,0,30，数学PI/10,9*数学PI/10）；
ctx.strokeStyle=“白色”；
ctx.stroke（）；
}
函数框架（）{
请求动画帧（帧）；
旋转+=0.04；
ctx.clearRect（-cw，-ch，2*cw，2*ch）；
背景（）
ctx.save（）；
翻译（cx，cy）；
ctx.旋转（旋转）；
//功能
头（）；
ctx.restore（）；
}
frame（）

canvas{border:1px solid}