マウス座標の取得 - nezzscript Html5 Canvas
まず、いつ知るか？ですが、これにはイベントというものを使います。 イベントとはブラウザの画面上で起こる出来事のことで、例えば、 フォーム入力 マウスクリック キーボード操作 などがあります。要するにページ上でユーザが何かしたときに発生するものです。 今回はマウスにしたがって動く画像を作りたいので 対象になるイベントはmousemoveです。このイベントはマウスが動いた時に発生します。 そのまんまですね。 イベントを補足するためのメソッドとしてJavaScriptにはaddEventListener()というものが あります。以下のように記述します。 obj.addEventListener("mousemove",fnc(),false); objは任意のDOMオブジェクトです。 第一引数はイベントの種類です。click,mousedown,mouseupなどがありま
Canvasアニメーションの基礎 - nezzscript Html5 Canvas
canvas上でのアニメーション表現の基本的な流れを説明します。 概ね以下のようになります。 任意の座標に図形を描画 座標をスクリプトで計算。 一度Canvasをクリア。 スクリプトで得られた数値を使って再描画。 ではそれぞれについて見ていきます。 1.任意の座標に図形を描画 はじめに描画したい位置をあらかじめ設定しておきます。 例えば var point = {x:10,y:50}; などとしておけば、point.xとpoint.yの値で描画する座標を管理出来ます。 この座標をスクリプトで変化させることによってアニメーション効果を生みます。 2.座標をスクリプトで計算 時間経過に伴って位置が変化していくようなスクリプトにするなら、 setTimeout()関数を使って同じ処理を繰り返し実行します。 例えば、point.xとpoint.yの値を1/100秒ごとに１ずつ増やしていくには va
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
