Canvas圆环步骤流程代码
本文最后更新于75 天前,其中的信息可能已经过时,[email protected]
[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]

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇