LoginSignup
1
0

More than 5 years have passed since last update.

継ぎ足し方式で線を描く

Last updated at Posted at 2017-11-20

Subjoined Line (1) | CreateJS
太さを 3 に設定しているのに、太さ 1 になってしまう。

CreateJS 1.0.0 にしたら、直った!
Subjoined Line (1) | CreateJS

var graph = new createjs.Shape();
stage.addChild(graph);
var count;
$("#button-play").on("click", playLine);
function playLine(event) {
    graph.graphics.clear();
    graph.graphics.setStrokeStyle(3, "round", "round");
    graph.graphics.beginStroke("#FF3366");
    graph.graphics.moveTo(-320, -120*Math.sin(-320*RADIAN));

    count = -320;
    createjs.Ticker.addEventListener("tick", updateLine);
}
function updateLine(event) {
    count += 4;

    var px = count;
    var py = 120*Math.sin(px*RADIAN);
    graph.graphics.lineTo(px, -py);

    if (count == 320) {
        graph.graphics.endStroke();
        createjs.Ticker.removeEventListener("tick", updateLine);
    }
}

Subjoined Line (2) | CreateJS
太さを 3 に再設定して、さらに moveTo() しないと、太さ 3 にならない。

var graph = new createjs.Shape();
stage.addChild(graph);
var count;
$("#button-play").on("click", playLine);
function playLine(event) {
    graph.graphics.clear();
    graph.graphics.setStrokeStyle(3, "round", "round");
    graph.graphics.beginStroke("#FF3366");
    graph.graphics.moveTo(-320, -120*Math.sin(-320*RADIAN));

    count = -320;
    createjs.Ticker.addEventListener("tick", updateLine);
}
function updateLine(event) {
    count += 4;

    var px = count;
    var py = 120*Math.sin(px*RADIAN);
    graph.graphics.lineTo(px, -py);
    //太さを再設定
    graph.graphics.setStrokeStyle(3, "round", "round");
    graph.graphics.moveTo(px, -py);

    if (count == 320) {
        graph.graphics.endStroke();
        createjs.Ticker.removeEventListener("tick", updateLine);
    }
}
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0