javascript - 在一个页面中同时旋转两个画布？

Question

我有两个画布。

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

在 ist canvas(id='canvas') 我正在加载图像。

在第二个画布（id='annCanvas'）中，我正在绘制形状（例如矩形、线条等）。

我想同时旋转两个画布。（四个旋转值 0,90,180,270）。

提前致谢...

Answer 1

您可以使用 css 动画，并将该动画应用于这些画布..

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