人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML5のcanvasを使用し、10本の斜線を引いたのですが、
これをアニメーションで、徐々に伸びていく風にしたいです。
やり方をご教授頂けますでしょうか?

●質問者: makocan
●カテゴリ:インターネット
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● だわかき
●34ポイント

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/


2 ● cx20
●33ポイント

こんな感じでしょうか。

<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


3 ● otusoham
●33ポイント

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

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ