<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style='border:solid 1px #000'></canvas>
<div onclick="test()">
clickme
</div>
</body>
</html>
<script type="text/javascript">
let mynum=1;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function test(){
mynum=mynum+1;
if(mynum>3){
arrs=[{//数据
num:2,
color:'green'
},{
num:2,
color:'red'
},{
num:2,
color:'orange'
}]
}else{
arrs=[{//数据
num:1,
color:'green'
},{
num:2,
color:'red'
},{
num:3,
color:'orange'
}]
}
ctx.fillStyle="ffffff";//白色为例子；
ctx.fillRect(0,0,500,500);
draw(arrs);
}
// function draw() {
// var canvas = document.getElementById('canvas');
// if (canvas.getContext){
// var ctx = canvas.getContext('2d');
//
//
//
// ctx.beginPath();
// ctx.strokeStyle = "green"
// ctx.lineWidth=25;
// ctx.lineCap='butt';
// ctx.arc(150, 150,125, 0, 0.3333333333333333*Math.PI, false);
// ctx.stroke();
//
//
//
// ctx.beginPath();
// ctx.strokeStyle = "red"
// ctx.lineWidth=25;
// ctx.lineCap='butt';
// ctx.arc(150, 150, 125, 0.3333333333333333*Math.PI, 1*Math.PI, false);
// ctx.stroke();
//
//
//
// ctx.beginPath();
// ctx.strokeStyle = "orange";
// ctx.lineWidth=25;
// ctx.lineCap='butt';
// ctx.arc(150, 150, 125, 1*Math.PI, 2*Math.PI, false);
// ctx.stroke();
//
//
//
//
// }
// }
//
function draw(arr) {
if (canvas.getContext){
var cicle_center_left=250;//圆心x
var cicle_center_right=250;//圆心Y
var cicle_center_distance=150;//半径
let drawlineCap="butt";//边界方式
let total=6;//总数
let beginArcRadio=0;//开始角度
//绘制圆环
arr.forEach(Element=>{
let endArcRadio=Element.num/total;
ctx.beginPath();
ctx.strokeStyle = Element.color;
ctx.lineWidth=25;
ctx.lineCap=drawlineCap;
console.log(beginArcRadio*2, (beginArcRadio+endArcRadio)*2)
ctx.arc(cicle_center_left, cicle_center_right,cicle_center_distance-ctx.lineWidth, beginArcRadio*2*Math.PI, (beginArcRadio+endArcRadio)*2*Math.PI, false);
ctx.stroke();
ctx.restore();
beginArcRadio=beginArcRadio+endArcRadio;
})
// //绘制线条
let beginLineRadio=0;//开始角度
arr.forEach(Element=>{
debugger;
let endLineRadio=Element.num/total;
let lineX=250;
let lineY=250;
ctx.beginPath();
ctx.strokeStyle = Element.color;
ctx.lineWidth=1;
// if((beginArcRadio+endArcRadio+beginArcRadio)<=1){
debugger;
lineX=lineX+250*Math.cos(((endLineRadio+endLineRadio+beginLineRadio)*Math.PI));
lineY=lineY+250*Math.sin(((endLineRadio+endLineRadio+beginLineRadio)*Math.PI));
ctx.moveTo(lineX,lineY);
console.log(lineX,lineY);
console.log(endLineRadio+endLineRadio+beginLineRadio);
if((endLineRadio+endLineRadio+beginLineRadio)<0.5||endLineRadio+endLineRadio+beginLineRadio>1.5){
ctx.lineTo(lineX+100, lineY);
}else if((endLineRadio+endLineRadio+beginLineRadio)==0.5){
ctx.lineTo(lineX, lineY+100);
}else if((endLineRadio+endLineRadio+beginLineRadio)==1.5){
ctx.lineTo(lineX, lineY-100);
}else{
ctx.lineTo(lineX-100, lineY);
}
ctx.stroke();
beginLineRadio=beginLineRadio+endLineRadio;
// }else{
// lineY=lineY+150*Math.abs(Math.sin(((beginArcRadio+endArcRadio+beginArcRadio)*2*Math.PI)));
// }
// ctx.arc(150, 150,125, beginArcRadio*2*Math.PI, (beginArcRadio+endArcRadio)*2*Math.PI, false);
// ctx.stroke();
// beginArcRadio=beginArcRadio+endArcRadio;
})
//
//绘制线条
//计算线条起点
}
}
</script>
网友评论