在javascript中顺时针旋转，然后逆时针旋转 [英] clockwise and then anticlockwise rotation in javascript

问题描述

我想旋转画布元素以首先按顺时针方向旋转动画180度，然后逆向旋转（逆时针）旋转180度。我已经使用了此代码，但无法按我的意愿工作。

I want to rotate a canvas element to first do animation of rotation in clockwise direction by 180 degree then do a reverse(anticlockwise) rotation of 180 degree.I have used this code but its not working as i want.

 function Rotate(arg) {
                rotateInterval = setInterval(function () {
                    arg.save(); //saves the state of canvas
                    arg.clearRect(0, 0, arg.canvas.width, arg.canvas.height); //clear the canvas
                    arg.translate(arg.canvas.width / 2, arg.canvas.height / 2); //let's translate

                    if (flag2 == false)
                       arg.rotate(-(ang += 5) * Math.PI / 180); //increment the angle and rotate the image 
                        //arg.style.rotate(5);
                    else {
                        
                        ang = 0;
                        arg.rotate((ang += 5) * Math.PI / 180);
                       
                    }
                    if (ang == 180) {
                        if (flag2 == true)
                            flag3 = true;
                        else
                        flag2 = true;
                    }
                    if (flag3 == true && ang == 180) {
                        clearInterval(rotateInterval)
                        flag2 = false;
                    }
                    // ctxOne.drawImage(bowl, -ctxOne.canvas.width / 2, -ctxOne.canvas.height / 2, ctxOne.canvas.width, ctxOne.canvas.height); //draw the image ;)
                    arg.drawImage(bowl, -90, -90, 180, 180);
                    arg.restore(); //restore the state of canvas
                }, 100);
            }

推荐答案

引入了 flag3 ，但我认为您不需要它。我假设旋转以 ang = 0 开始，并且 flag2 应该告诉旋转方向：false时递增，true时递减。但是，在设置为 ang = 0 时，您总是要设置它。您的代码应类似于：

You have introduced a flag3 but I think you don't need it. I assume that rotation starts with ang = 0 and flag2 shall tell the rotation direction: increment when false and decrement when true. But you always set ang = 0 when it is true. Your code should look like:

var rotateInterval, ang = 0, flag2 = false;

function Rotate(arg) {

rotateInterval = setInterval(function () {
    arg.save();
    arg.clearRect(0, 0, arg.canvas.width, arg.canvas.height);
    arg.translate(arg.canvas.width / 2, arg.canvas.height / 2);

    if (flag2 == false) ang += 5; // increment ang if flag2 == false ( = go forward)
    else ang -= 5; // otherwise decrement ang ( = go backwards)

    arg.rotate(ang * Math.PI / 180); // set the new ang to the rotation

    if (ang == 180) flag2 = true; // change direction if 180 deg is reached

    if (flag2 == true && ang == 0) { // if we go backwards and have reached 0 reset
        clearInterval(rotateInterval)
        flag2 = false;
    }

    arg.drawImage(bowl, -90, -90, 180, 180);
    arg.restore(); //restore the state of canvas
}, 100);

}

现在角度从0开始，逐步上升到180 ，然后逐步回到0，然后停止。

Now the angle starts with 0, goes stepwise up to 180, then stepwise back to 0, then stops.

这篇关于在javascript中顺时针旋转，然后逆时针旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！