Javascript 如何使上下文在单击时旋转

我想让画布中的上下文在单击按钮时旋转，我很确定我必须使用

onclick

，但我不知道该放在哪里，或者我必须在其中编写什么逻辑。有人能帮我吗

我尝试在单击时使用jquery，但不起作用：

HTML:

围绕

旋转（-180度）

进行连续旋转

函数readImage（输入）{
const canvas=document.getElementById（'canvasImg'）；
const context=canvas.getContext（“2d”）；
context.canvas.width=window.innerWidth；
context.canvas.height=window.innerHeight；
clearRect（0，0，canvas.width，canvas.height）；
如果（输入值！=''）{
imgSrc=window.URL.createObjectURL（input.files[0]）；
}
const img=新图像（）；
img.onload=函数（）{
drawImage（img，0,0）；
}
img.src=imgSrc；
}
jQuery（'.rotate'）。在（'click'，function（）上{
$（“#canvasImg”）.css（{'transform'：'rotate（-180deg）}）；
})
函数（度）{
clearRect（0，0，canvas.width，canvas.height）；
context.save（）；
context.translate（canvas.width/2，canvas.height/2）；
旋转（度*Math.PI/180）；
context.drawImage（image，-image.width/2，-image.width/2）；
restore（）；
}

旋转

好的，那么代码中有一些问题

在drawRotate函数中，可以使用变量，例如从未声明过的

image

、

context

、

canvas

调用函数param

degree

，但将其用作

degreeS

你将上下文向前翻译，但决不将其返回

也许还有更多，我忘了 很快，请查看所附代码

旋转
const canvas=document.getElementById（'canvasImg'）；
const context=canvas.getContext（“2d”）；
const input=document.getElementById（'fileInp'）；
函数readImage（输入）{
context.canvas.width=window.innerWidth；
context.canvas.height=window.innerHeight；
clearRect（0，0，canvas.width，canvas.height）；
让imgSrc；
如果（输入值！=''）{
imgSrc=window.URL.createObjectURL（input.files[0]）；
}
const img=新图像（）；
img.onload=函数（）{
context.translate（canvas.width/2，canvas.height/2）；
上下文.绘图图像（img，-img.width/2，-img.height/2，img.width，img.height）；
context.translate（-canvas.width/2，-canvas.height/2）；
}
img.src=imgSrc；
}
函数（度）{
让imgSrc；
如果（输入值！=''）{
imgSrc=window.URL.createObjectURL（input.files[0]）；
}
const img=新图像（）；
img.onload=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
context.translate（canvas.width/2，canvas.height/2）；
旋转（度*Math.PI/180）；
上下文.绘图图像（img，-img.width/2，-img.height/2，img.width，img.height）；
context.translate（-canvas.width/2，-canvas.height/2）；
}
img.src=imgSrc；
}

css transofmr不是只旋转图像而不旋转画布吗？

<input type="file" id="fileInp" onchange="readImage(this)">
<button type="button" class="rotate">Rotate</button>
<div>
<canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas>
</div>

function readImage(input) {
    const canvas = document.getElementById('canvasImg');
    const context = canvas.getContext("2d");
    context.canvas.width = window.innerWidth;
    context.canvas.height = window.innerHeight;
    context.clearRect(0, 0, canvas.width, canvas.height);
    if (input.value !== '') {
        imgSrc = window.URL.createObjectURL(input.files[0]);
    }
    const img = new Image();
    img.onload = function() {
        context.drawImage(img, 0, 0);
    }
    img.src = imgSrc;
}

jQuery('.rotate').on('click', function() {
    degree = 90;
    drawRotate(degree);
})

function drawRotate(degree) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(degrees * Math.PI / 180);
    context.drawImage(image, -image.width / 2, -image.width / 2);
    context.restore();
}