1

私は2つのキャンバスを持っています。

<canvas id="canvas" width="1338 px" height="550px" ></canvas>
<canvas id="annCanvas" width="1338 px" height="550px"></canvas>

ist canvas(id='canvas') では、画像を読み込んでいます。

2番目のキャンバス（id = 'annCanvas'）で、形状（長方形、線など）を描いています。

両方のキャンバスを同時に回転させたい (4 つの回転値 0,90,180,270)。

前もって感謝します...

4

1 に答える 1

0

css animation を使用して、そのアニメーションをそれらのキャンバスに適用できます。

    <canvas id="canvas" width="1338 px" height="550px" class="rotate_anim"></canvas>
<canvas id="annCanvas" width="1338 px" height="550px" class="rotate_anim"></canvas>

そしてあなたのcssはこのようになるはずです

    .rotate_anim{
    -webkit-animation-duration: 1s;
    -webkit-animation-name: animation1;
    -webkit-animation-iteration-count:infinite ;
    }

@-webkit-keyframes animation1
{
0%{ -webkit-transform:  rotate(0deg);
}
25%{ -webkit-transform:  rotate(90deg);
}
50%{ -webkit-transform: rotate(180deg);
    }
    75%{ -webkit-transform:  rotate(270deg);
    }
    100%{ -webkit-transform: rotate(360deg); 
    }
    }
于 2012-07-18T13:24:53.823 に答える