CreateJS : サインカーブを表示する
スポンサードリンク
X座標は1ずつ増加、Y座標はMath.sin関数によって求める。
Math.sin関数によって-1から1の間の数値を取得しY座標の計算に使用する。
関数の引数には0.05ずつ増加する数値を与える。
var stage = new createjs.Stage("canvas");
var shape = new createjs.Shape();
stage.addChild(shape);
var angleY = 0;
var centerY = 100;
var range = 50;
var speedX = 1;
var speedY = 0.05;
var px = 0;
shape.graphics
.setStrokeStyle(1)
.beginStroke("DarkRed")
.moveTo(0, centerY);
// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
// X座標の計算
px += speedX;
// Y座標の計算
var py = centerY + Math.sin(angleY) * range;
angleY += speedY;
// 線を描画
shape.graphics.lineTo(px, py);
stage.update();
}
createjs.Ticker.timingMode = createjs.Ticker.RAF;
Search
Recent Posts
- OpenSSHのエラー「bad ownership or modes for chroot directory component」の原因と解消方法
- Apacheの起動状態をチェックして停止してる場合にApacheを起動するシェルスクリプト
- Amazon LinuxのOSバージョンを調べる方法|/etc/redhat-release の代替ファイル
- MYSQLでダンプファイルを取得する際に発生したエラー「Couldn't execute 'SELECT BINLOG_GTID_POS('', '0')': You are not using binary logging (1381)」の原因と対処方法
- RHEL系Linuxでリポジトリを一覧表示するコマンド(dnf repolist)