スタートページJavascriptCANVAS

xycoordinate.js 使用解説書


xycoordinate.jsの概要

目的

著作権等

構成

xycoordinate.jsでは、最初に呼ばれる setCanvas で、
   canvas = document.getElementById(canvasname);
   ctx = canvas.getContext('2d');
によりcanvasを定義しています。
そして、次の値を与えることにより、W-H座標系とX-Y座標系の対応をしています。
   cw = 400; ch = 400;
   xmin = -4; xmax = 4; ymin = -4; ymax = 4;
また、canvasの全ピクセルの保管用に canvasImageData があります。
これら赤字の変数は、グローバル変数として定義しています。

通常の場合、呼出側のjavascriptは、次のような構成になります。


   function xxx() { 
     cw = 400; ch = 400; 
     setCanvas("canvas1", "white"); 
     clearScreen("white"); 
     xmin = -4; xmax=4; ymin=-4; ymax=4; 
     :
     : 各xycoordinate.js関数
     :
   }

関数

パラメータ

角度

X軸右方向から反時計回りでラジアンを単位にしています。
0点と点(x,y)の角度は次のとおりです。
(x,y)=角度(°)
(1,0)=0.00(0°)
(1,1)=0.79(45°)
(0,1)=1.57(90°)
(-1,1)=2.36(135°)
(-1,0)=3.14(180°)
(-1,-1)=-2.36(-135°)
(0,-1)=-1.57(-90°)
(1,-1)=-0.79(-45°)

<canvas id="canvas1" width="400" height="400"></canvas>

テストソース

xycoordinate.jsのソース

関数

[実行]をクリックすると、右に呼出側javascriptと該当関数のxycoordinate.js、その結果の canvas が表示されます。

支援関数