HTML5・リサジュー図形

x軸方向の振幅:Ax
y軸方向の振幅:Ay
x軸方向の周波数:ωx
y軸方向の周波数:ωy
x軸方向の位相:θx [deg]
y軸方向の位相:θy [deg]
リサジュー図形の色:





お持ち帰りコーナー

「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。



ソースコード

lissajous.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5・リサジュー図形</title>
<script language="JavaScript" type="text/javascript" src="lissajous.js"></script>
</head>
<body bgcolor="#c0c0c0" style="margin-left:auto;margin-right:auto;text-align:center;">
<h1>HTML5・リサジュー図形</h1>
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5" style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td align="center" bgcolor="#000000" rowspan="8">
<canvas id="lissajous" width="500" height="500"></canvas></td>
<td align="right"><i>x</i>軸方向の振幅:<i>A<sub>x</sub></i>=</td>
<td align="left"><input type="text" id="ampx" value="200"></td>
</tr>
<tr>
<td align="right"><i>y</i>軸方向の振幅:<i>A<sub>y</sub></i>=</td>
<td align="left"><input type="text" id="ampy" value="200"></td>
</tr>
<tr>
<td align="right"><i>x</i>軸方向の周波数:<i>&omega;<sub>x</sub></i>=</td>
<td align="left"><input type="text" id="omegax" value="1"></td>
</tr>
<tr>
<td align="right"><i>y</i>軸方向の周波数:<i>&omega;<sub>y</sub></i>=</td>
<td align="left"><input type="text" id="omegay" value="1"></td>
</tr>
<tr>
<td align="right"><i>x</i>軸方向の位相:<i>&theta;<sub>x</sub></i>=</td>
<td align="left"><input type="text" id="thetax" value="0">[deg]</td>
</tr>
<tr>
<td align="right"><i>y</i>軸方向の位相:<i>&theta;<sub>y</sub></i>=</td>
<td align="left"><input type="text" id="thetay" value="0">[deg]</td>
</tr>
<tr>
<td align="right">リサジュー図形の色:</td>
<td align="left">
  <select id="linecolor">
    <option value="#00ffff" style="background-color:#00ffff;" selected>cyan</option>
    <option value="#00ff00" style="background-color:#00ff00;">lime</option>
    <option value="#ff00ff" style="background-color:#ff00ff;">magenta</option>
    <option value="#ffa500" style="background-color:#ffa500;">orange</option>
    <option value="#ffff00" style="background-color:#ffff00;">yellow</option>
  </select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="軌跡を描画する" onclick="lissajous()"
 style="width:200px;height:50px;background-color:#000000;color:#00ffff;"><br>
<input type="button" value="PNG画像を保存する" onclick="saveasPNG()"
 style="width:200px;height:50px;background-color:#000000;color:#00ffff;"><br>
</td>
</tr>
</table>
</form>

<br><hr><br>

<h2>お持ち帰りコーナー</h2>
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br>
<div><img id="newImg"></div>

</body>
</html>

lissajous.js

// グローバル変数
var cvs; // canvas要素のオブジェクトを取得する為の変数
var cnt; // コンテキストを取得する為の変数

var w = 500; // canvasの横幅
var h = 500; // canvasの高さ
var hw = 250; // canvasの横幅の半値幅
var hh = 250; // canvasの高さの半値幅
var linecolor = "#00ffff"; // リサジュー図形の描画色を表す変数を初期値と共に宣言

var ampx = 200, ampy = 200; // x軸方向及び、y軸方向の振幅を表す変数を初期値と共に宣言
var omegax = 1, omegay = 1; // x軸方向及び、y軸方向の周波数を表す変数を初期値と共に宣言
var thetax = 0, thetay = 0; // x軸方向及び、y軸方向の位相を表す変数を初期値と共に宣言
var t = 0, dt = 1.0; // 時刻及び、時間の刻み幅を表す変数を初期値と共に宣言
var x, y, xx, yy; // 始点及び終点のx座標及びy座標を宣言

window.onload = function(){
  cvs = document.getElementById("lissajous"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得

  setup(); // 初期化処理(背景色と軸の描画を含む)
};

// 初期化処理をまとめた関数(背景色と軸の描画を含む)
var setup = function(){
  ampx = parseFloat(document.getElementById("ampx").value);
  ampy = parseFloat(document.getElementById("ampy").value);
  // x軸方向及び、y軸方向の振幅をテキストフィールドの文字列を実数化して取得
  omegax = parseFloat(document.getElementById("omegax").value);
  omegay = parseFloat(document.getElementById("omegay").value);
  // x軸方向及び、y軸方向の周波数をテキストフィールドの文字列を実数化して取得
  thetax = parseFloat(document.getElementById("thetax").value);
  thetay = parseFloat(document.getElementById("thetay").value);
  // x軸方向及び、y軸方向の位相をテキストフィールドの文字列を実数化して取得

  linecolor = document.getElementById("linecolor").value;
  // リサジュー図形の描画色を表す文字列をテキストフィールドから取得して、変数に代入

  t = 0; // 時刻を初期化
  thetax=thetax*Math.PI/180; // 度数法から孤度法への変換
  thetay=thetay*Math.PI/180; // 度数法から孤度法への変換
  omegax=omegax*Math.PI/180; // 度数法から孤度法への変換
  omegay=omegay*Math.PI/180; // 度数法から孤度法への変換

  cnt.fillRect(0, 0, w, h); // canvas全体を黒色の矩形で塗りつぶす
  drawColorLine(0, hh, w, hh, "#c0c0c0"); // x軸を銀色の直線で描画
  drawColorLine(hw, 0, hw, h, "#c0c0c0"); // y軸を銀色の直線で描画
};

// 共通の描画処理をまとめた関数(更新処理を含む)
var draw = function(){
  x = hw + ampx * Math.cos(omegax * t + thetax); // 始点のx座標
  y = hh - ampy * Math.sin(omegay * t + thetay); // 始点のy座標
  t += dt; // 時刻の更新処理(微小時間dtだけ進める)
  xx = hw + ampx * Math.cos(omegax * t + thetax); // 終点のx座標
  yy = hh - ampy * Math.sin(omegay * t + thetay); // 終点のy座標
  drawColorLine(x, y, xx, yy, linecolor);
};

// カラー版直線を引く関数
var drawColorLine = function(x0, y0, x1, y1, color){
  cvs = document.getElementById("lissajous"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得

  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.strokeStyle = color;
  cnt.stroke();
};

// リサジュー図形を描画する関数本体
var lissajous = function(){
  setup(); // 初期化処理(背景色と軸の描画を含む)
  setInterval("draw()",10); // 共通の描画処理(更新処理を含む)
};

// PNG画像として保存
var saveasPNG = function(){
  var png = cvs.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};



Shadow Academy トップへ戻る

inserted by FC2 system