簡易テキスト編集＆表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>SVG：サンプル</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}
});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<h1>SVG：サンプル</h1>

<form>
<p>
<input type="button" value="戻る" onclick="history.back()">
<input type="button" value="再読込み" onclick="location.reload()">
</p>
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>関数グラフ：サンプル</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}
});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
function CLine(x1,y1,x2,y2){
// ux,uyは単位あたりピクセル数
var px1=x1*ux,py1=y1*uy;
var px2=x2*ux,py2=y2*uy;
ctx.moveTo( px1,py1);
ctx.lineTo(px2, py2);
}
// グリッド描画Canvas
function CGrid(xstep,ystep,x_min,y_min,x_max,y_max){
ctx.strokeStyle = 'gray';
ctx.lineWidth = 0.5;
ctx.beginPath();
for(var i=0;i<=x_max;i=i+xstep){
  if (i>=x_min){
    CLine(i,y_min,i,y_max);
  }
};
for(var i=0;i>=x_min;i=i-xstep){
  if (i<=x_max){
    CLine(i,y_min,i,y_max);
  }
};
for(var i=0;i<=y_max;i=i+ystep){
  if (i>=y_min){
    CLine(x_min,i,x_max,i);
  }
};
for(var i=0;i>=y_min;i=i-ystep){
  if (i<=y_max){
    CLine(x_min,i,x_max,i);
  }
};
ctx.stroke();
}
// 座標軸
function CJiku(){
ctx.beginPath();
// x軸
CLine(xmin,0,xmax,0);
CLine(xmax,0,xmax-10/ux,5/uy);
CLine(xmax,0,xmax-10/ux,-5/uy);
// y軸
CLine(0,ymin,0,ymax);
CLine(0,ymax,5/ux,ymax-10/uy);
CLine(0,ymax,-5/ux,ymax-10/uy);
ctx.stroke();
}
// グリッド描画SVG
function svgGrid(xstep,ystep,x_min,y_min,x_max,y_max){
var data='';
for(var i=0;i<=x_max;i=i+xstep){
  if (i>=x_min){
    data=data+'M'+(i*ux)+','+(y_min*uy)+' L'+(i*ux)+','+(y_max*uy)+' ';
  }
};
for(var i=0;i>=x_min;i=i-xstep){
  if (i<=x_max){
    data=data+'M'+(i*ux)+','+(y_min*uy)+' L'+(i*ux)+','+(y_max*uy)+' ';
  }
};
for(var i=0;i<=y_max;i=i+ystep){
  if (i>=y_min){
    data=data+'M'+(x_min*ux)+','+(i*uy)+' L'+(x_max*ux)+','+(i*uy)+' ';
  }
};
for(var i=0;i>=y_min;i=i-ystep){
  if (i<=y_max){
    data=data+'M'+(x_min*ux)+','+(i*uy)+' L'+(x_max*ux)+','+(i*uy)+' ';
  }
};
return data;
}
function lblSet(gid,x,y,locate,lbl,dx,dy){
  var lbl1 = document.getElementById(gid+'1');
  var lbl2 = document.getElementById(gid+'2');
  var wlbl = lbl1.getAttribute('width');
  //var hlbl = lbl1.getAttribute('height');
  var lblx=0,lbly=0,clbl='';
  switch(locate){
   case '右下':
     lblx=0;lbly=0;clbl='lblrb';break;
   case '下':
     lblx=wlbl/2;lbly=0;clbl='lblb';break;
   case '左下':
     lblx=wlbl;lbly=0;clbl='lbllb';break;
   case '左':
     lblx=wlbl;lbly=20;clbl='lbll';break;
   case '左上':
     lblx=wlbl;lbly=30;clbl='lblla';break;
   case '上':
     lblx=wlbl/2;lbly=30;clbl='lbla';break;
   case '右上':
     lblx=0;lbly=30;clbl='lblra';break;
   case '右':
     lblx=0;lbly=20;clbl='lblr';break;
   default:
     lblx=0;lbly=0;clbl='default';break;
  };
  var X=X1+(x-xmin)*ux-lblx+dx;
  var Y=Y1+(ymax-y)*uy-lbly+dy;
  lbl1.setAttribute('x',X);
  lbl1.setAttribute('y',Y);
  lbl2.setAttribute('class',clbl);
  lbl2.innerHTML=lbl;
}
function hojoLine(gid,x,y){
var hojo = document.getElementById(gid);
var data=hojo.getAttribute('d');
if (data==null){
  data = 'M'+(x*ux)+','+(y*uy)+' '+(x*ux)+','+(0*uy)+' ';
  data += 'M'+(x*ux)+','+(y*uy)+' '+(0*ux)+','+(y*uy)+' ';
}else{
  data += ' M'+(x*ux)+','+(y*uy)+' '+(x*ux)+','+(0*uy)+' ';
  data += 'M'+(x*ux)+','+(y*uy)+' '+(0*ux)+','+(y*uy)+' ';
};
hojo.setAttribute('d',data);
}

</script>
<style>
div.lblrb {margin:3px;text-align:left;border-style:solid;border-color:red;}
div.lblb {margin:3px;text-align:center;border-style:solid;border-color:red;}
div.lbllb {margin:3px;text-align:right;border-style:solid;border-color:red;}
div.lbll {margin:3px;text-align:right;border-style:solid;border-color:red;}
div.lblla {margin:3px;text-align:right;border-style:solid;border-color:red;}
div.lbla {margin:3px;text-align:center;border-style:solid;border-color:red;}
div.lblra {margin:3px;text-align:left;border-style:solid;border-color:red;}
div.lblr {margin:3px;text-align:left;border-style:solid;border-color:red;}
</style>
</head>
<body>
<h1>関数グラフ：サンプル</h1>

// SVG ここまで
// Canvas ここから
/*
var fcanvas = document.getElementById('fcanvas');
fcanvas.setAttribute('x',X1);
fcanvas.setAttribute('y',Y1);
fcanvas.setAttribute('width',w);
fcanvas.setAttribute('height',h);
var canvas = document.getElementById("canvas01");
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
var ctx = canvas.getContext("2d");
ctx.transform(1,0,0,-1,-xmin*ux,ymax*uy);
// グリッドCanvas
CGrid(0.5,0.5,xmin+0.1,ymin+0.1,xmax-0.1,ymax-0.1);
// 座標軸
ctx.strokeStyle = "black";
CJiku();
ctx.beginPath();
// 単位円
ctx.moveTo(ux,0);
ctx.arc(0,0,ux,0,2*Math.PI,true);
ctx.stroke();
// 関数プロット
// $y=x^2$
var n=100;// サンプル数
var t;// 媒介変数
var t1=xmin,t2=xmax;
ctx.strokeStyle="blue";
ctx.lineWidth=2;
ctx.beginPath();
var i=0;
var t1=xmin,t2=xmax;
t=t1+(t2-t1)*i/n;
x1=t;
y1=Math.pow(t,2);
for(var i=1;i<=n;i++){
  t=t1+(t2-t1)*i/n;
  x2=t;
  y2=Math.pow(t,2);
  CLine(x1,y1,x2,y2);
  x1=x2,y1=y2;
}
ctx.stroke();
*/
// Canvas ここまで
// 共通ラベル
lblSet('lbl01',-1.5,1.5+0.4,'右下','関数 $y=x^2$ のグラフ',0,0);
lblSet('lbl02',0,1.5,'上','$y$',0,0);
lblSet('lbl03',1.5,0,'右','$x$',0,0);
lblSet('lbl04',0,0,'左下','$\\mathrm{O}$',0,0);
// ラベルｘ座標 
lblSet('lbl05',-1.0,0,'左下','$-1$',0,0);
lblSet('lbl06',-0.5,0,'下','$-\\frac{1}{2}$',0,0);
lblSet('lbl07',0.5,0,'下','$\\frac{1}{2}$',0,0);
lblSet('lbl08',1.0,0,'右下','$1$',0,0);
// ラベルｙ座標 
lblSet('lbl09',0,-1.0,'左下','$-1$',0,0);
lblSet('lbl10',0,-0.5,'左','$-\\frac{1}{2}$',0,0);
lblSet('lbl11',0,0.5,'左','$\\frac{1}{2}$',0,0);
lblSet('lbl12',0,1.0,'左上','$1$',0,0);
// ラベルその他 
lblSet('lbl13',1.0,1.0,'右','<span style="color: BLUE;">$y=x^2$</span>',0,0);
lblSet('lbl14',0,(-1+Math.sqrt(5))/2,'右','$\\frac{-1+\\sqrt{5}}{2}$',0,0);

// -->
</script>
</div>

</body>
</html>