javascript - 在单个页面中同时旋转两个 Canvas ？

Question

我有两个 Canvas 。

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

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

在第二个 Canvas (id='annCanvas')中，我正在绘制形状(例如矩形、直线等)。

我想同时旋转两个 Canvas 。(四个旋转值0,90,180,270)。

提前致谢...

Answer 1

您可以使用 css 动画，并将该动画应用到这些 Canvas 上..

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