微信小程序一个圆分成8份扇形的样式代码
时间: 2024-05-05 18:18:01 浏览: 18
请参考以下代码:
HTML:
```html
<canvas id="canvas"></canvas>
```
JS:
```javascript
const degree = Math.PI / 180; // 1度对应的弧度
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2;
const colors = ['#FF0000', '#FFA500', '#FFFF00', '#008000', '#00FFFF', '#0000FF', '#4B0082', '#800080']; // 每个扇形的颜色
// 绘制圆心
ctx.beginPath();
ctx.arc(centerX, centerY, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#000000';
ctx.fill();
// 绘制扇形
const angle = 360 / 8; // 每个扇形的角度
for (let i = 0; i < 8; i++) {
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, (angle * i - 90) * degree, (angle * (i + 1) - 90) * degree);
ctx.closePath();
ctx.fillStyle = colors[i];
ctx.fill();
}
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)