效果圖，每次刷新的顏色都不同
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas class="canvas" width="300" height="300"></canvas>
<script>
function Canvas(element, arr, data) {
this.element = element;
if (data && data instanceof Object) {
//ES6語(yǔ)法，合并對(duì)象。
let { x = 0 } = Object.assign({}, data);
this.x = x;
let { y = 0 } = Object.assign({}, data);
this.y = y;
let { r = 0 } = Object.assign({}, data);
this.r = r;
}
this.arr = arr;
//定義數(shù)組數(shù)的總和
this.sum = null;
//起始坐標(biāo)
this.start = 0;
//終止坐標(biāo)
this.end = 0;
this.main();
}
Canvas.prototype = {
constructor: Canvas,
//定義調(diào)用函數(shù)，供上面使用
main() {
this.getelement();
this.draw();
},
//定義獲取元素的函數(shù)
getelement() {
this.canvas = document.querySelector(this.element);
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.width;
this.height = this.canvas.height;
},
//繪制函數(shù)
draw() {
for (let i = 0; i < this.arr.length; i++) {
this.sum += this.arr[i]
}
for (let i = 0; i < this.arr.length; i++) {
this.rgb = this.randomcolor().join(',');
this.ctx.beginPath();
this.ctx.moveTo(this.x, this.y);
this.end += this.arr[i] / (this.sum / 2);//終止角度
this.ctx.arc(this.x, this.y, this.r, this.start * Math.PI, this.end * Math.PI);
this.ctx.fillStyle = `rgb(${this.rgb})`;
this.ctx.fill();
this.ctx.closePath();
this.start += this.arr[i] / (this.sum / 2);//起始角度
}
},
//取隨機(jī)顏色的函數(shù)
randomcolor() {
let colorarr = [];
let result = 255 - 0 + 1;
for (var j = 0; j < 3; j++) {
colorarr.push(Math.floor(Math.random() * result + 1))
}
return colorarr;
},
}
//調(diào)用
new Canvas('.canvas', [20, 30, 44, 88, 60, 77, 80], {
x: 150,
y: 150,
r: 100
})
</script>
</body>
</html>
寫的比較簡(jiǎn)單，求大佬手下留情。
求出數(shù)組數(shù)的總和，然后拿數(shù)組中的每個(gè)數(shù)除以總和，求出每個(gè)的比例。
下一個(gè)的開始角度是上一個(gè)的結(jié)束角度。
