Question

我想在arcs CSS中创建canvas，然后无限期旋转它。有一个圆形的中心div，我希望arcs围绕它旋转。

我试图在图像编辑器（即Paint）中创建完整图像，然后旋转它，但是我不想一起旋转所有图层。（有3层圆弧；黄色，橙色和红色）即使我想使中心圆静止。在触发器的基础上，最内层，中间一层或最外层将分别旋转。

我使用此功能创建了一个弧：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 1 * Math.PI);
ctx.stroke();

我不知道如何将所有圆弧设置为围绕div并向其旋转。

在这里您可以检查我的代码并在代码段中输出。我擅长HTML和CSS，但刚接触canvas概念。如果需要，即使我也可以使用Javascript或JQuery。如何实现此功能？解决方案会响应吗？

img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  animation: spin 8s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div>
  <img src="https://s22.postimg.cc/51w6ynd4h/arcs-final.jpg">
</div>

在CSS画布中创建弧并向中心圆旋转

0 个答案: