<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Smith Chart</title>
<style>
#SMcvsRapper{ margin:0px auto; text-align:center; background:#eef; width:440px; height:410px; }
#SMcvs{ border:0px solid #CCC; background:#ff9; width:100%; height:100%; }
</style>
<script type="text/javascript">
<!--
// ### r+jx=(1+u+jv)/(1-u-jv) ###
// ### (u-r/(r+1))^2+v^2=1/(1+r)^2 (u-1)^2+(v-1/x)^2=1/x^2 ###
var SMcv; // canvas要素(HTMLCanvasElement)
var SMctx; // 2Dコンテキスト(CanvasRenderingContext2D)
var SMr0=200; //円の半径(px)
var SMcvHg = 5; // 円の縦幅余白(px)
var SMcvH= 2*(SMr0+SMcvHg); // SMcvの縦幅(px)
var SMcvWg = 20; // 円の横幅余白(px)
var SMcvW = 2*(SMr0+SMcvWg); // SMcvの横幅(px)
var SMmouseX; // 最後にクリックされた位置のx座標
var SMmouseY; // 最後にクリックされた位置のy座標
var SMtxtP=[
[0,0,0,0,0,0,0],
[0.2,0.37,0.05,0.6,1.44,1.57,1.84],
[0.5,0.67,0.36,0.2,1.84,1.27,1.54],
[1,1,1,0.08,1.96,1,1],
[2,1.27,1.55,0.2,1.83,0.7,0.39],
[5,1.57,1.85,0.62,1.42,0.4,0.09],
[10,1.69,1.89,0.8,1.24,0.25,0.01]
];
function init(){
SMcv=document.getElementById('SMcvs'); //id 名の要素を取得
SMcv.width = SMcvW;
SMcv.height = SMcvH;
SMctx=SMcv.getContext('2d'); //2D(平面) Contextを取得
if(!SMcv||!SMcv.getContext){return false;}
SMcy0=SMr0+SMcvHg;SMcx0=SMr0+SMcvWg; // 中心位置
drawSMTH(); // smith chart を描画
SMctx.fillText('ここに Γを記載',5,15);
SMcv.onclick = function(SMe){ // クリックイベントの登録
SMctx.clearRect(0, 0, SMcvW, SMcvH); // 一度描画をクリア
drawSMTH(); // smith chart を描画
// クリック位置の座標計算（canvasの左上を基準。border分は0）
var SMrect = SMe.target.getBoundingClientRect();
SMmouseX= SMe.clientX- Math.floor(SMrect.left)- 0;
SMmouseY= SMe.clientY- Math.floor(SMrect.top)- 0;
// alert(SMmouseX+', '+SMmouseY);
// クリック位置を中心に円を描画
SMctx.beginPath();
SMctx.arc(SMmouseX,SMmouseY,3,0,Math.PI*2,false);
SMctx.fill();
// 座標の表示テキストを描画
var SMmaxWidth = 100;
SMctx.textAlign = 'start';
SMmouseSMX=(SMmouseX-0.5*SMcvW)/SMr0;
SMmouseSMY=(-SMmouseY+0.5*SMcvH)/SMr0;
var SMrefA = Math.round(Math.sqrt(SMmouseSMX*SMmouseSMX+ SMmouseSMY*SMmouseSMY)*1000)/1000;
var SMrefP = Math.round(Math.atan2(SMmouseSMY,SMmouseSMX)*1800/Math.PI)/10;
var SMmessage = 'Γ:'+ SMrefA + ', ∠:'+ SMrefP +'度';
if(SMrefA>1){SMmessage= 'そこは受動回路外です'; };
SMctx.fillText(SMmessage,5,15);
}; // end of SMcv.onclick --------------
}; // end of initial() -----------------
function drawSMTH(){ // smith chart を描画
SMctx.lineWidth=1; SMctx.strokeStyle='#c96'; //線の太さ、色指定
SMctx.beginPath(); // 現在のパスをリセット
SMctx.moveTo(SMcvWg,SMcy0); SMctx.lineTo(2*SMcx0-SMcvWg,SMcy0); //横線を引く
SMctx.arc(SMcx0,SMcy0,SMr0,0, Math.PI*2, false); // 外円を描画する
for(j=1;j<SMtxtP.length;j++){ //等インピーダンス線を描く
SMzz=SMtxtP[j][0]; // パラメータセット
SMcx=SMcx0+SMr0*SMzz/(1+SMzz);SMcy=SMcy0;
SMr=SMr0/(1+SMzz); //等抵抗円半径を設定
SMctx.moveTo(SMcx0+SMr0,SMcy0); //z=∞点に移動
SMctx.arc(SMcx,SMcy0,SMr,0,2*Math.PI,true); //等抵抗円を描く
SMcx=SMcx0+SMr0; SMr=SMr0/SMzz; SMcy=SMcy0-SMr; //等インダクタンス半径設定
SMctx.moveTo(SMcx0+SMr0,SMcy0); //z=∞点に移動
var SMangEnd = 0.5*Math.PI+ 2* Math.atan(SMzz);
SMctx.arc(SMcx,SMcy,SMr,0.5*Math.PI,SMangEnd,false); //等インダクタンス弧
SMcx=SMcx0+SMr0; SMr=SMr0/SMzz; SMcy=SMcy0+SMr; //等キャパシタンス半径設定
SMctx.moveTo(SMcx0+SMr0,SMcy0); //z=∞点に移動
var SMangEnd =1.5*Math.PI- 2* Math.atan(SMzz);
SMctx.arc(SMcx,SMcy,SMr,1.5*Math.PI,SMangEnd,true); //等キャパシタンス弧
}
SMctx.stroke(); // 現在のサブパスに線を引く
SMctx.font = "11.5px 'ＭＳ ゴシック'"; //目盛のフォント
SMctx.textAlign = "middle";
SMctx.fillText("SmithChart",1.71*SMcx0,0.06*SMcy0); //タイトル
SMctx.fillText("byくらげ",1.76*SMcx0,1.96*SMcy0); //作者
SMctx.fillText("0",0.05*SMcx0,1.02*SMcy0);
SMctx.fillText("∞",1.92*SMcx0,1.02*SMcy0);
for(j=1;j<SMtxtP.length;j++){
SMctx.fillText(SMtxtP[j][0],SMtxtP[j][1]*SMcx0,0.99*SMcy0);
SMctx.fillText(SMtxtP[j][0]+'j',SMtxtP[j][2]*SMcx0,SMtxtP[j][3]*SMcy0);
SMctx.fillText('-'+SMtxtP[j][0]+'j',SMtxtP[j][2]*SMcx0,SMtxtP[j][4]*SMcy0);
}
SMctx.stroke(); // 現在のサブパスに線を引く
}; // end of drawSMTH() ---------------------
// -->
</script>
</head>
<body onload="init()">
<div id="SMcvsRapper">
<canvas id="SMcvs" width='440' height='410'>ここに、チャートを表示</canvas>
</div>
</body>
</html>