CreateJS : サインカーブを表示する

目次

スポンサードリンク

demo

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