如何迅速绘制不同角度的扇形图形？

本文共计922个文字，预计阅读时间需要4分钟。

注意审题，首先要快，不要过于焦虑，可以先不考虑使用canvas，尽量不使用js，且尽量不用过多资源。两种方案及其缺点：

方案一：使用纯CSS实现旋转效果缺点：只能实现简单的旋转效果，不支持复杂动画，性能可能不如JavaScript。

方案二：使用JavaScript实现旋转效果缺点：需要编写额外的JavaScript代码，增加了开发难度，对性能有一定要求。

以下两种方案满足要求：

方案A：使用CSS3的`transform`属性实现旋转css@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}.element { animation: rotate 2s linear infinite;}

方案B：使用JavaScript实现旋转，不依赖canvas

这两种方案都可以实现任意角度的旋转，且不需要使用canvas和过多的JavaScript代码。

注意审题，第一要快，不要太麻烦，首先可以抛弃canvas，能不用js尽量不用，第二要支持任意角度。

两种方案和他们的缺点

以下两种方案满足要求

方案A：很久之前写过一篇《简单的css3 Loading动画》，原理是利用两个半圆旋转的方式，可以生成任意角度的扇形；

方案B：近期在GitHub看到一个利用路径裁剪的方式来生成扇形，Demo地址。

这两种方式用来画静态的扇形都没有什么问题，但画动态的扇形，则不那么方便。

方案A，需要根据扇形角度判断两个半圆分别需要旋转多少度；方案B更复杂一些，随着扇形角度变化，路径裁剪的参数个数也在变化，需要写一套逻辑来判断。