class Circle {
|
constructor(el) {
|
this.el = el;
|
this.radius = 100;
|
this.width = 100;
|
this.height = 100;
|
this.canvas = "";
|
this.context = "";
|
this.x = 50;
|
this.y = 50;
|
this.init(el);
|
}
|
init(el) {
|
// 生成canvas
|
this.canvas = document.createElement("canvas");
|
this.setCanvas(el);
|
el.appendChild(this.canvas);
|
// 设置context
|
this.context = this.canvas.getContext('2d');
|
// 绘制
|
this.draw();
|
}
|
setCanvas(el) {
|
let width = el.offsetWidth;
|
let height = el.offsetHeight;
|
this.width = width;
|
this.height = height;
|
this.canvas.width = width;
|
this.canvas.height = height;
|
this.radius = width>height?height/2:width/2;
|
this.x = this.width/2;
|
this.y = this.height/2;
|
}
|
draw() {
|
|
}
|
getAngle(angle, addAngle) {
|
let add = addAngle?addAngle:Math.PI/2;
|
let rAngle = angle+add;
|
return rAngle>=Math.PI*2?rAngle:rAngle-Math.PI*2;
|
}
|
fillCircle(radius, startAngle, endAngle, color) {
|
let ctx = this.context;
|
let x = this.x;
|
let y = this.y;
|
radius = radius<0?0:radius;
|
ctx.beginPath();
|
ctx.fillStyle = color;
|
ctx.arc(x, y, radius, startAngle, endAngle);
|
ctx.fill();
|
}
|
strokeCircle(radius, startAngle, endAngle, color, lineWidth, lineType) {
|
let ctx = this.context;
|
let x = this.x;
|
let y = this.y;
|
radius = radius<0?0:radius;
|
ctx.beginPath();
|
ctx.strokeStyle = color;
|
ctx.fillStyle = color;
|
ctx.lineWidth = lineWidth;
|
// 虚线
|
if(lineType == 'dash') {
|
ctx.setLineDash([4, 4]);
|
}else {
|
ctx.setLineDash([]);
|
}
|
ctx.arc(x, y, radius, startAngle, endAngle);
|
ctx.stroke();
|
ctx.setLineDash([]);
|
}
|
clear() {
|
let ctx = this.context;
|
ctx.clearRect(0, 0, this.width, this.height);
|
}
|
resize() {
|
let el = this.el;
|
// 清除画布
|
this.clear();
|
this.setCanvas(el);
|
this.draw();
|
}
|
}
|
export default Circle;
|
