HTML5のcanvasを使用し、10本の斜線を引いたのですが、

これをアニメーションで、徐々に伸びていく風にしたいです。
やり方をご教授頂けますでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/06/03 18:38:00
  • 終了:2013/06/10 18:40:04

回答(3件)

id:dawakaki No.1

だわかき回答回数797ベストアンサー獲得回数1222013/06/03 19:38:26

ポイント34pt

canvasにはアニメーションメソッドがないので、setIntervalメソッドで再描画を繰り返すことによって線を伸ばす形になります。
下記サイトの「05」が参考になります。
http://www.mdn.co.jp/di/articles/2657/?page=4

iOSなら、下記サイトの「Animation Timing API」が使えます。
便利ですね。
http://dev.classmethod.jp/smartphone/ios6-safari-html5/

id:cx20 No.2

cx20回答回数607ベストアンサー獲得回数1082013/06/03 22:12:32

ポイント33pt

こんな感じでしょうか。

<canvas id="canvas" width="440" height="440"></canvas>
<script type="text/javascript">
var N = 10;        // 斜線の数
var ANGLE = 60;    // 斜線の傾き
var X_STEP = 20;   // 斜線間の幅
var X_MAX = 440;   // スクリーンサイズ(横幅)
var Y_MAX = 440;   // スクリーンサイズ(縦幅)
var canvas;
var ctx;
var x_pos = 0;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    setInterval( draw, 100 );    // 100msごとに実行
}

function draw() {
    drawScreen();   // スクリーンクリア
    drawSlash();    // 斜線描画
}

function drawScreen() {
    ctx.fillStyle = "#000000";
    ctx.fillRect( 0, 0, X_MAX, Y_MAX );
}


function drawSlash() {
    ctx.strokeStyle = "#ffffff";
    ctx.beginPath();
    var x, y, x2, y2;
    var x_max = X_STEP * N;
    y = Y_MAX;
    for (x = 0; x <= x_max; x += X_STEP) {
        // 斜線の位置を計算
        x2 = x + x_pos;
        y2 = Y_MAX - Math.floor( x_pos * Math.tan( ANGLE * Math.PI / 180 ) );
        ctx.moveTo(x, y);
        ctx.lineTo(x2, y2);
        console.log( "(" + x + "," + y + ") to (" + x2 + "," + y2 + ")" );
    }
    ctx.stroke();
    x_pos += 5; // アニメーション時の位置の増分
}

window.onload = function() {
    init();
};
</script>

実行結果は以下で確認できます。

■ Canvas で斜線を伸ばすテスト。
http://jsdo.it/cx20/j3tM

id:mahosuto No.3

otusoham回答回数789ベストアンサー獲得回数282013/06/10 17:30:54

ポイント33pt

http://yoppa.org/taumedia10/2065.html

こちらをみるのはどうでしょうか。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません