<script>
var mycanvas = document.getElementById('myCanvas');
var ctx = mycanvas.getContext("2d");
//流程块
function Can(ctx,Bolds,BorderColor,DistanceX,DistanceY,Widths,Hights,Bcolor,FontColor,FontS,Texts,textX,textY){
//边框背景
ctx.beginPath();
ctx.lineWidth=Bolds;
ctx.strokeStyle=BorderColor;//边框颜色
ctx.rect(DistanceX,DistanceY,Widths,Hights);
ctx.fillStyle=Bcolor;//背景颜色
ctx.fill();
ctx.fillStyle=FontColor;//字体颜色
ctx.font = FontS;
ctx.fillText(Texts, textX, textY);
ctx.stroke();
ctx.closePath();
};
//字体
function Fon(FontS,Texts,textX,textY,color){
ctx.beginPath();
ctx.font = FontS;
ctx.fillStyle=color;
ctx.fillText(Texts, textX, textY);
ctx.stroke();
ctx.closePath();
}
//箭头
function drawArrow(ctx,fromX,fromY,toX,toY,theta,headlen,width,color) {
theta = typeof(theta) != 'undefined' ? theta : 30;
headlen = typeof(theta) != 'undefined' ? headlen : 10;
width = typeof(width) != 'undefined' ? width : 1;
color = typeof(color) != 'color' ? color : '#000'; // 计算各角度和对应的P2,P3坐标
var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
angle1 = (angle + theta) * Math.PI / 180,
angle2 = (angle - theta) * Math.PI / 180,
topX = headlen * Math.cos(angle1),
topY = headlen * Math.sin(angle1),
botX = headlen * Math.cos(angle2),
botY = headlen * Math.sin(angle2);
ctx.save();
ctx.beginPath();
var arrowX = fromX - topX;
var arrowY = fromY - topY;
ctx.moveTo(arrowX, arrowY);
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
arrowX = toX + topX;
arrowY = toY + topY;
ctx.moveTo(arrowX, arrowY);
ctx.lineTo(toX, toY);
arrowX = toX + botX;
arrowY = toY + botY;
ctx.lineTo(arrowX, arrowY);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
ctx.restore();
};
Can(ctx,1,"#ccc",10,10,120,50,"#000","#fff","12pt Arial","流程1",40,40);
Can(ctx,1,"#ccc",280,10,120,50,"#000","#fff","12pt Arial","流程2",316,40);
Can(ctx,1,"#ccc",550,10,120,50,"#000","#fff","12pt Arial","流程3",570,40);
Can(ctx,1,"#ccc",820,10,120,50,"#000","#fff","12pt Arial","流程4",855,40);
Can(ctx,1,"#ccc",1090,10,120,50,"#000","#fff","12pt Arial","流程5",1104,40);
Can(ctx,1,"#ccc",1090,200,120,50,"#000","#fff","12pt Arial","流程6",1104,232);
Can(ctx,1,"#ccc",1090,380,120,50,"#ccc","#fff","12pt Arial","流程7",1104,410);
Can(ctx,1,"#ccc",820,380,120,50,"#ccc","#fff","12pt Arial","流程8",840,410);
Can(ctx,1,"#ccc",550,380,120,50,"#ccc","#fff","12pt Arial","流程9",570,410);
Can(ctx,1,"#ccc",280,380,120,50,"#ccc","#fff","12pt Arial","流程10",316,410);
Can(ctx,1,"#ccc",10,380,120,50,"#ccc","#fff","12pt Arial","流程11",40,410);
Can(ctx,1,"#ccc",550,200,120,50,"#ccc","#fff","12pt Arial","流程12",586,232);
//canvas环境,线X轴起点,线Y轴起点,旋转角度x,y,尖角,尖角,颜色
drawArrow(ctx,130,30,170,30,0,0,1,'green');
drawArrow(ctx,130,42,170,42,0,0,1,'blue');
drawArrow(ctx,240,30,280,30,30,10,1,'green');
drawArrow(ctx,240,42,280,42,30,10,1,'blue');
//字
Fon("12pt Arial","李大钊",180,30,"green");
Fon("12pt Arial","陈独秀",180,60,'red');
</script>
