abebetaroのブックマーク - はてなブックマーク

abebetaro id:abebetaro

ブックマーク / www.webopixel.net (3)

HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。パーティクルオブジェクトを作成して動かす基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
abebetaro 2015/09/02
canvas

HTML5
リンク
HTML5+Canvasで学ぶ物理アニメーションの基礎
Posted: 2015.07.28 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 Canvasアニメーションの基礎については下記を参考にしてください。この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる基本となるオブジェクトを作成する前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy
abebetaro 2015/09/02
html5

canvas
リンク
HTML5+Canvasで学ぶインタラクティブアニメーションの基礎
Posted: 2015.08.27 / Category: javascript / Tag: HTML5, アニメーションすごく簡単なものですが、HTML5+Canvasを使用してマウスの操作に反応するインタラクティブアニメーションを作成してみたいと思います。 Canvasアニメーションの基礎については下記を参考にしてください。この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasで学ぶ物理アニメーションの基礎マウスのイベントの取得方法 JavaScriptでクリックイベントを取得するには「addEventListener」を使用します。例えばcanvas内でクリックした情報を取得したい場合は下記のようにします。 canvas.addEventListener
abebetaro 2015/09/02
canvas

html5
リンク
1