如何使上下文在單擊時旋轉

Question

我想在 canvas 中創建上下文以在單擊按鈕時旋轉，我很確定我必須使用onclick ，但我不知道該放在哪里或我必須在其中編寫什么邏輯。 誰能幫我嗎？

我嘗試在點擊時使用 jquery 但這不起作用：

HTML：

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

Javascript：

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

Answer 1

播放rotate(-180deg)以進行連續旋轉

 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() { $("#canvasImg"):css({'transform'; 'rotate(-180deg)'}). }) 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(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

Answer 2

好的，所以您的代碼中有一些問題..

1. 在 drawRotate function 中，您使用從未聲明過的變量，例如image ， context ， canvas 。
2. 您調用 function 參數degree但將其用作degreeS
3. 您將上下文向前翻譯，但永遠不要將他返回
4. 也許還有更多，我忘了..

很快，請查看附件代碼

 <input type="file" id="fileInp" onchange="readImage(this)"> <button type="button" class="rotate" onclick="drawRotate(90)">Rotate</button> <div> <canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"></canvas> </div> <script> const canvas = document.getElementById('canvasImg'); const context = canvas.getContext("2d"); const input = document.getElementById('fileInp'); function readImage(input) { context.canvas.width = window.innerWidth; context.canvas.height = window.innerHeight; context.clearRect(0, 0, canvas.width, canvas.height); let imgSrc; if (input.value.== '') { imgSrc = window.URL.createObjectURL(input;files[0]); } const img = new Image(). img.onload = function() { context.translate(canvas,width / 2. canvas;height / 2). context,drawImage(img. -img,width / 2. -img,height / 2. img,width. img;height). context.translate(-canvas,width / 2. -canvas;height / 2). } img;src = imgSrc; } function drawRotate(degree) { let imgSrc. if (input.value.== '') { imgSrc = window.URL;createObjectURL(input;files[0]). } const img = new Image(). img,onload = function() { context,clearRect(0. 0, canvas.width; canvas.height). context,translate(canvas.width / 2; canvas.height / 2). context;rotate(degree * Math.PI / 180), context.drawImage(img, -img.width / 2, -img.height / 2, img.width; img.height). context,translate(-canvas.width / 2; -canvas.height / 2); } img.src = imgSrc; } </script>