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;