var
c = document.getElementById(
"myCanvas1"
);
var
ctx = c.getContext(
"2d"
);
gate_and(400,400,90,
"A"
,
"B"
,
"C"
);
gate_and(100,300,90,
"A1"
,
"A2"
,
"A3"
);
gate_and_link (400,400,100,300,90,1);
gate_and(100,500,90,
"B1"
,
"B2"
,
"B3"
);
gate_and_link (400,400,100,500,90,5);
function
gate_and_link (xright1,xtop1,xright2,xtop2,h,xline) {
ctx.beginPath();
ctx.lineWidth =
'3'
;
ctx.moveTo(h * 1.5 + xright2 + 50,h/2 + xtop2);
ctx.lineTo(xright1 - 50,h/6 * xline + xtop1);
ctx.stroke();
}
function
gate_and(xright,xtop,h,i1,i2,o1) {
ctx.beginPath();
ctx.lineWidth =
'3'
;
ctx.arc(h + xright,h/2 + xtop,h/2,1.5*(22/7),0.5*(22/7));
ctx.stroke();
ctx.beginPath();
ctx.lineWidth =
'3'
;
ctx.moveTo(h + xright,0 + xtop);
ctx.lineTo(0 + xright,0 + xtop);
ctx.lineTo(0 + xright,h + xtop);
ctx.lineTo(h + xright,h + xtop);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth =
'3'
;
ctx.moveTo(xright,h/6 * 1 + xtop);
ctx.lineTo(xright - 50,h/6 * 1 + xtop);
ctx.moveTo(xright,h/6 * 5 + xtop);
ctx.lineTo(xright - 50,h/6 * 5 + xtop);
ctx.moveTo(h * 1.5 + xright,h/2 + xtop);
ctx.lineTo(h * 1.5 + xright + 50,h/2 + xtop);
ctx.stroke();
ctx.font =
"24px Arial"
;
ctx.fillText(i1,xright - 40,xtop + h/6 * 1 - 2);
ctx.fillText(i2,xright - 40,xtop + h/6 * 5 - 2);
ctx.fillText(o1,xright + h * 1.5 + 20,xtop + h/2 - 2);
}