本文最后更新于517 天前，其中的信息可能已经过时，如有错误请发送邮件到97376394@qq.com
[precode]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas圆环步骤流程代码 - 站长素材</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<style>
*{
padding: 0px;
margin: 0px;
background:#eee;
}
</style>
<body>
<canvas id="workflow" width="600px" height="600px"></canvas>
<script>
function Workflow(workflow){
//定义画布大小
this.width = 600;
this.height= 600;
//圆的颜色
this.strokecolor = "rgba(255,0,0,0.2)";
this.fillcolor = "rgba(255,0,0,1)";
//定义圆形大小
this.radius = 200;
//实心圆空心圆
this.fill = false;
//定义圆路径的粗细
this.lineWidth = "3";
this.content = workflow.getContext("2d");
//小圆在路径圆上面个数(把圆平均分)
this.smallcount = 3;
//小圆的路径填充颜色
this.smallcolor = "rgba(255,0,0,1)";
//小圆的坐标集合
this.smallxy = [];
//文字的坐标结合
this.fontxy = [];
//画圆弧
this.circle=function(x=this.width/2,y=this.height/2,r=this.radius,startangle=0,endangle=2*Math.PI){
this.content.lineWidth = this.lineWidth;
this.content.beginPath();
//console.log(x+"-"+startangle+"-"+r+"-"+endangle);
this.content.arc(x,y,r,startangle,endangle,false);
if(this.fill){
this.content.fillStyle = this.fillcolor;
this.content.fill();
}else{
this.content.strokeStyle = this.strokecolor;
this.content.stroke();
}
};
//画空心小圆
this.smallcircle=function() {
//计算画圆的位置
//第一个圆在大圆正上方
//定点位置
var radius = this.radius/8;
for(var i=0; i<this.smallcount;i++){
var radians = (Math.PI / 180) * Math.round(360 / this.smallcount); //弧度
var x = this.width/2 +this.radius * Math.sin(radians * i),
y = this.height/2 - this.radius * Math.cos(radians * i);
this.smallxy.push({x,y});
this.content.moveTo(x,y);
this.content.beginPath();
this.content.lineWidth = this.lineWidth;
this.content.arc(x,y,radius,2*Math.PI,false);
this.content.strokeStyle = this.smallcolor;
if(i==0){
//第一个填充
this.content.fillStyle = this.smallcolor;
}else{
this.content.fillStyle = "#fff";
}
this.content.fill();
this.content.stroke();
}
}
//写字
this.fontText = function(){
//写字
//文本的属性
this.content.font = "25px Arial";
this.content.fillStyle = "#000";
for(var i=0; i<this.smallcount;i++){
this.content.fillText("步骤"+(i+1),this.smallxy[i].x+20,this.smallxy[i].y-40);
this.fontxy.push({x:this.smallxy[i].x+20,y:this.smallxy[i].y-40});
}
}
}
var workflow = document.getElementById("workflow");
var drawimg = new Workflow(workflow);
console.log(drawimg)
drawimg.circle();
drawimg.smallcircle();
drawimg.fontText();
//workflow.onmousemove = mouseevent;
workflow.onclick = clickevent;
//控制是否点击
var isclick = false;
//控制填充颜色
var smallcolor = "#ff0";
function mouseevent(e) {
var pointx = e.clientX;
var pointy = e.clientY;
console.log(e);
var pointarr = drawimg.smallxy;
var radius = drawimg.radius/8;
for(var i=1; i<pointarr.length;i++){
var x = pointarr[i].x;
var y = pointarr[i].y;
if(parseInt(x-radius) < pointx && pointx< parseInt(x+radius)){
if(parseInt(y-radius) < pointy && pointy< parseInt(y+radius)){
drawimg.fill = true;
drawimg.fillcolor = smallcolor;
drawimg.circle(x, y, radius - drawimg.lineWidth);
}else{
drawimg.fill = true;
drawimg.fillcolor = "#fff";
drawimg.circle(x,y,radius-drawimg.lineWidth);
}
}else{
drawimg.fill = true;
drawimg.fillcolor = "#fff";
drawimg.circle(x,y,radius-drawimg.lineWidth);
}
}
}
function clickevent(e) {
var pointx = e.clientX;
var pointy = e.clientY;
var pointarr = drawimg.smallxy;
var newdrawimg = new Workflow(workflow);
var radius = newdrawimg.radius/8;
for(var i=0; i<pointarr.length;i++){
var x = pointarr[i].x;
var y = pointarr[i].y;
if(parseInt(x-radius) < pointx && pointx< parseInt(x+radius)){
if(parseInt(y-radius) < pointy && pointy< parseInt(y+radius)){
isclick = true;
//结束动画
clearInterval(interId);
//清除画布重新绘制给长宽重置
workflow.height = drawimg.height;
newdrawimg.lineWidth = "3";
newdrawimg.strokecolor = "rgba(255,0,0,0.2)";
newdrawimg.fill = false;
newdrawimg.circle();
newdrawimg.smallcircle();
smallcolor = "#f00";
const startangle = -0.5*Math.PI;
const endangle = -0.5*Math.PI+ i*(Math.PI / 180)*Math.round(360 / newdrawimg.smallcount);
newdrawimg.strokecolor = "rgba(255,0,0,1)";
newdrawimg.lineWidth = "10";
if(i >= pointarr.length-1){
newdrawimg.circle();
}else{
newdrawimg.circle((drawimg.width)/2,(newdrawimg.height)/2,newdrawimg.radius,startangle,endangle);
}
//写字
newdrawimg.fontText();
for(n = i;n>0;n--){
newdrawimg.fill = true;
newdrawimg.fillcolor = "#f00";
newdrawimg.circle(pointarr[n].x,pointarr[n].y,radius);
}
for(n=i+1;n<pointarr.length;n++){
newdrawimg.fill = true;
newdrawimg.fillcolor = "#fff";
newdrawimg.circle(pointarr[n].x,pointarr[n].y,radius-newdrawimg.lineWidth/4);
}
}
}
}
}
//动画画圆环
//drawimg.content.moveTo(drawimg.smallxy[0].x,drawimg.smallxy[0].y);
drawimg.content.moveTo(0,0);
drawimg.lineWidth = "10";
drawimg.strokecolor = "rgba(255,0,0,1)";
//2*k*Math.PI-0.5*Math.PI
var addtime = 0;
var startangle = 0.5*Math.PI*Math.sin((2*addtime-0.5)*Math.PI);
var endangle = startangle + (Math.PI*(1+addtime)/360)
drawimg.circle((drawimg.width)/2,(drawimg.height)/2,drawimg.radius,startangle,endangle);
var interId= setInterval(function(){
var pointy = drawimg.width/2 + drawimg.radius * Math.sin(endangle),
pointx= drawimg.height/2 + drawimg.radius * Math.cos(endangle);
for(var i=0;i<drawimg.smallcount;i++){
var radians = (Math.PI / 180) * Math.round(360 / drawimg.smallcount); //弧度
var radius = drawimg.radius/8;//小圆半径
var x = drawimg.width/2 +drawimg.radius * Math.sin(radians * i),
y = drawimg.height/2 - drawimg.radius * Math.cos(radians * i);
if(parseInt(x-radius) < pointx && pointx< parseInt(x+radius)) {
if (parseInt(y - radius) < pointy && pointy < parseInt(y + radius)) {
var pointarr = drawimg.smallxy;
drawimg.fill = true;
drawimg.fillcolor = "#f00";
drawimg.circle(pointarr[i].x,pointarr[i].y,radius);
}else{
drawimg.fill = false;
drawimg.circle((drawimg.width)/2,(drawimg.height)/2,drawimg.radius,startangle,endangle);
}
}else{
drawimg.fill = false;
drawimg.circle((drawimg.width)/2,(drawimg.height)/2,drawimg.radius,startangle,endangle);
}
}
startangle = endangle;
addtime = addtime+0.01;
endangle =startangle+(0.1*addtime)*Math.PI;
if(endangle >= 1.5*Math.PI){
clearInterval(interId);
}
},50)
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">木柚村-Muui.Cn</a></p>
</div>
</body>
</html>
[/precode]
