(function(){var a,b,c,d,cmt='',test=-1;if ( window.location.search ){var p = window.location.search.substr(1).split(String.fromCharCode(0x26));var q = new Object();for (var i=0; p.length-i!=0; i++) {var r = p[i].split('=');q[r[0]] = parseInt(r[1]);}a = q['a'];b = q['b'];c = q['c'];d = q['d'];test = q['test'];}if ( typeof a === 'undefined' || typeof b === 'undefined' || typeof c === 'undefined' || typeof d === 'undefined' ) {if ( test==-1 ) test = Math.floor(Math.random()*8);switch ( test ) {case 0:a = Math.floor(Math.random()*7)*10+20;b = 180-2*a;c = d = Math.floor(Math.random()*(a/10-1))*10+10;break;}}var lt=String.fromCharCode(0x3c),gt=String.fromCharCode(0x3e);document.getElementById('check').innerHTML = lt+'inp'+'ut type=\'checkbox\' id=\'line\''+gt+'補助線';function sin(s) {return Math.sin(Math.PI*s/180.0);}function cos(c) {return Math.cos(Math.PI*c/180.0);}function tan(t) {return Math.tan(Math.PI*t/180.0);}function pyth(x,y) {return Math.sqrt(x*x+y*y);}function height(a,b) {return tan(a)*tan(b)/(tan(a)+tan(b));}function arc(x,y,r) {if ( document.getElementById('line').checked ) {ctx.beginPath();ctx.arc(x,y,r,0,2*Math.PI,false);ctx.closePath();ctx.lineWidth = 2.0;ctx.stroke();}}function line(x1,y1,x2,y2) {if ( document.getElementById('line').checked ) {ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.lineWidth = 2.0;ctx.stroke();}}function text(a1,b1,c1,d1) {var a2,b2,c2,d2;var ad=Math.atan2(ay-dy,ax-dx)*180/Math.PI;var ab=Math.atan2(ay-by,ax-bx)*180/Math.PI;var ba=Math.atan2(by-ay,bx-ax)*180/Math.PI;var bc=Math.atan2(by-cy,bx-cx)*180/Math.PI;var cb=Math.atan2(cy-by,cx-bx)*180/Math.PI;var cd=Math.atan2(cy-dy,cx-dx)*180/Math.PI;var dc=Math.atan2(dy-cy,dx-cx)*180/Math.PI;var da=Math.atan2(dy-ay,dx-ax)*180/Math.PI;if ( Math.max(ad,0)!=0 ) {a2 = ab+(ad-ab)/2;} else {a2 = ab+(ad-ab)/2+180;}b2 = bc-(ba+bc)/2;c2 = cd+(cb-cd)/2;d2 = -da-(dc-da)/2;if ( a1==360 ) a1=a2;if ( b1==360 ) b1=b2;if ( c1==360 ) c1=c2;if ( d1==360 ) d1=d2;if ( document.getElementById('line').checked ) {ctx.fillText('A',ax-12*cos(a1),ay-12*sin(a1));ctx.fillText('B',bx-12*cos(b1),by+12*sin(b1));ctx.fillText('C',cx+12*cos(c1),cy+12*sin(c1));ctx.fillText('D',dx+12*cos(d1),dy-12*sin(d1));} else {ctx.fillText('A',ax-12*cos(a2),ay-12*sin(a2));ctx.fillText('B',bx-12*cos(b2),by+12*sin(b2));ctx.fillText('C',cx+12*cos(c2),cy+12*sin(c2));ctx.fillText('D',dx+12*cos(d2),dy-12*sin(d2));}}var cvs = document.getElementById('cvs');var ctx = cvs.getContext('2d');var e = Math.tan(c/180.0*Math.PI)/(Math.tan((a+b)/180.0*Math.PI)+Math.tan(c/180.0*Math.PI));var f = Math.tan(b/180.0*Math.PI)/(Math.tan((d+c)/180.0*Math.PI)+Math.tan(b/180.0*Math.PI));var g = e*Math.tan((a+b)/180.0*Math.PI);var h = f*Math.tan((d+c)/180.0*Math.PI);var x;var t=1;var ax=0,ay=0,bx=0,by=0,cx=0,cy=0,dx=0,dy=0;function draw1() {ctx.beginPath();ctx.clearRect(0,0,500,500);ctx.closePath();if ( Math.min(a+b+c,180)==180 || Math.min(b+c+d,180)==180 ){cmt = '図形を描けません';cmt += 'α=∠ABD='+a+'˚
β=∠DBC='+b+'˚
γ=∠ACB='+c+'˚
δ=∠DCA='+d+'˚
θ=∠ADBを求めよ。
';} else {w = 1;if ( Math.max(e,0)==0 ){if ( Math.max(f,1-e)==f ) w = f;else w += -e;}if ( Math.max(f,0)==0 ){if ( Math.max(e,1-f)==e ) w = e;else w += -f;}var z = 300/Math.max(Math.max(h,g),w);if ( w==1 ){bx = 250-(z*w/2);cx = 250+(z*w/2);} else if ( w==e || w==1-f ){bx = 250-(z*w/2);cx = bx+z;} else if ( w==f || w==1-e ){cx = 250+(z*w/2);bx = cx-z;} else if ( w==1-e-f ){bx = 250-(z*w/2)-z*e;cx = 250+(z*w/2)+z*f;}dx = cx - z*f;ax = bx + z*e;ay = 500-((500-z*Math.max(h,g))/2)-z*g;by = 500-((500-z*Math.max(h,g))/2);cy = 500-((500-z*Math.max(h,g))/2);dy = 500-((500-z*Math.max(h,g))/2)-z*h;var col;eval('col = document.defaultView.getComputedS'+'tyle(document.getElementById(\'inner\'),\'\').color;');eval('ctx.strokeS'+'tyle = col;');eval('ctx.fillS'+'tyle = col');var fs,ff;eval('fs = document.defaultView.getComputedS'+'tyle(document.getElementById(\'inner\'),\'\').fontSize;');eval('ff = document.defaultView.getComputedS'+'tyle(document.getElementById(\'inner\'),\'\').fontFamily;');ctx.font = fs+' '+ff;ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.lineJoin = 'bevel';cmt = 'α=∠ABD='+a+'˚
β=∠DBC='+b+'˚
γ=∠ACB='+c+'˚
δ=∠DCA='+d+'˚
θ=∠ADBを求めよ。
';ctx.beginPath();ctx.moveTo(bx,by);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ax,ay);ctx.closePath();ctx.lineWidth = 2.0;ctx.stroke();ctx.beginPath();ctx.lineJoin = 'bevel';ctx.moveTo(bx,by);ctx.lineTo(dx,dy);ctx.lineWidth = 2.0;ctx.stroke();ctx.beginPath();ctx.lineJoin = 'bevel';ctx.moveTo(cx,cy);ctx.lineTo(ax,ay);ctx.lineWidth = 2.0;ctx.stroke();draw2();document.getElementById('inner').innerHTML = cmt;}}function draw2() {if ( (a==30)*(b+c==120)*(b+d==90) ) {cmt += '線分ABを底辺とし頂点Fを右側に持つ正三角形を描く。
';cmt += '∠BDC=∠BFCより、□BCFDは円に内接し、△BFCはCを頂角とする二等辺三角形。
';cmt += '∴θ=2(β-30˚)='+(2*(b-30))+'˚';var fx=pyth(ax-bx,ay-by)*cos(b-30);var fy=pyth(ax-bx,ay-by)*sin(b-30);line(ax,ay,bx+fx,by-fy);line(bx,by,bx+fx,by-fy);line(cx,cy,bx+fx,by-fy);line(dx,dy,bx+fx,by-fy);text(360,360,c,b);} else if ( (b==30)*(c==30)*(a+2*d==180) ) {cmt += '線分BCを底辺とし頂点Fを上側に持つ正三角形を描く。
';cmt += '思考中…
';cmt += '∴θ=90˚-δ='+(90-d)+'˚';var fx=(cx-bx)/2;var fy=fx*Math.sqrt(3);line(ax,ay,bx+fx,by-fy);line(bx,by,bx+fx,by-fy);line(cx,cy,bx+fx,by-fy);line(dx,dy,bx+fx,by-fy);text(c,360,360,b);} else if ( (d==30)*(2*a==b)*(b+c==120) ) {cmt += '線分DCを底辺とし頂点Fを左側に持つ正三角形を描く。
';cmt += '∠BAC=∠BFCより、□AFBCは円に内接し、△FBCはBを頂角とする二等辺三角形。
';cmt += '∴θ=α+30˚='+(a+30)+'˚';var fx=pyth(dx-cx,dy-cy)*cos(c-30);var fy=pyth(dx-cx,dy-cy)*sin(c-30);line(ax,ay,cx-fx,cy-fy);line(bx,by,cx-fx,cy-fy);line(cx,cy,cx-fx,cy-fy);line(dx,dy,cx-fx,cy-fy);text(c,b,360,360);} else if ( (a+c==90)*(b+c==60)*(d==2*c) ) {cmt += '線分ADを底辺とし頂点Fを下側に持つ正三角形を描く。
';cmt += '思考中…
';cmt += '∴θ=α-β='+(a-b)+'˚';var fy=(cx-bx)*height(a-b,d-c);var fx=fy/tan(a-b);line(ax,ay,bx+fx,by+fy);line(bx,by,bx+fx,by+fy);line(cx,cy,bx+fx,by+fy);line(dx,dy,bx+fx,by+fy);text(360,b,c,360);} else if ( (d==30)*(b+c==120)*(c+a==90) ) {cmt += 'a';} else if ( (d+b==90)*(b+c==60)*(a==2*b) ) {cmt += 'c';} else if ( (a==30)*(2*d==c)*(b+c==120) ) {cmt += 'e';} else if ( (b==30)*(c==30)*(2*a+d==180) ) {cmt += 'g';} else {text(360,360,360,360);}}onload=function() { draw1(); };onchange=function() { draw1(); };})();
正しいパラメータを渡すとここに解説が表示されます。