edo1z blog

プログラミングなどに関するブログです

HTML5

HTML5 - 一部だけ横スクロールさせる

横スクロールは、overflow-x: scrollを設定したdivで囲むだけで簡単にできた。固定させたい部分の幅を明記する必要があるのではないかと思ったが不要だった。 https://github.com/endoyuta/yoko

HTML5 Canvas のIE8対応

最初ExplorerCanvasを使ってしまって、全然動かなかった。 参考:Internet Explorer 8でCanvasを動かす時のメモ VMLCanvasを使うとよかったです。 https://code.google.com/p/mofmof-js/wiki/VMLCanvas VMLCanvas.js は uuCanvas.js から Silverlight と Fla…

画像をクライアント側で縮小する

スマホからアップロードしようとするとスマホで撮影した画像ファイルのサイズが大きいので大体エラーになります。クライアント側で縮小しつつ、向きも合わせるとう処理が必須であります。 画像アップロード前にクライアント側で縮小してプレビューし、アップ…

javascript ドラッグ&ドロップで並び替え

HTML要素をドラッグアンドドロップで移動して、並び順を変更したい。 今知りましたが、sortabaleというドンピシャの機能があるんですねえ。ちなみに、ドットインストールにも載ってました。 $(function(){ $('#sortable').sortable(); }); cursor:'move'でカ…

HTML5 File API デスクトップからブラウザにファイルをドロップしてアップロード

デスクトップからブラウザにファイルをドロップできるようにしたい。 参考 Reading files in JavaScript using the File APIs Drag and DropとFile APIを試す はまちーのにっき。 File APIと、FormDataというのを使った。ちょっとごちゃごちゃしてるけど、do…

ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」を使ってみる

ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」で知った、gmaps.jsを使ってみます。 まずここで、ダウンロードします。ソースコードをコピペしてgmaps.jsを作成しました。ところで、google map APIはあまり使ったことがないので、とりあえず…

HTML5 - Canvas 円同士の衝突アニメーション

See the Pen Collision animation between circles by edo1z (@edo1z) on CodePen.

HTML5 - Canvas アニメーション Walk

See the Pen walk by edo1z (@edo1z) on CodePen.

HTML5 - Canvas アニメーション - 陣取りゲーム

マウスドラッグの向きにプレイヤー(青いボール)が動きます。動いている途中のパスが敵か自分に当たったらプレイヤーが死にます。ボールを動かして陣地を80%以上確保したらステージクリアです。敵を閉じ込めたら敵を倒せてボーナス点数がもらえます。(キ…

HTML5 - Canvas マウスイベント時の座標取得について(座標は小数点以下があるらしい)

こんな感じでマウスクリック時の座標を検知する。 var mouseX; var mouseY; //イベントリスナーの登録 canvas.addEventListener("mousedown", mouseDownHandler, false); function mouseDownHandler(e) { var rect = e.target.getBoundingClientRect(); mous…

HTML5 Canvas - 上からボールを落として跳ね返る

上からボールを落として跳ね返る様。重力があり跳ね返り係数があるのだ。オランダの科学者が重力はないといっており、他の著名科学者、物理学者が一定の賛同をしているようだ。これが本当なら重力がある前提で全ての物理の教科書がつくられている現代におい…

HTML5 - Canvas 自然なジャンプをする四角形

地球には重力がありますので、飛んでもしまいには落ちます。飛ぶときは初速度がありますが、この速度は毎秒9.8m/s2重力によって減速します。当然落下中は毎秒9.8m/s2速度が増します。この9.8m/s2を重力加速度といいます。9.8m/s2というのは大体の数値で、場…

HTML5 - Canvas アニメーション くま

くまのアニメーション。ランダムでキャラ選ぶ。ランダムで向きと速度決める。 See the Pen Kuma by edo1z (@edo1z) on CodePen.

HTML5 - Canvas パックマンのモンスターを描くJavaScript関数(2)

x,y座標ともに指定できるモンスター関数です。 See the Pen jvxdRm by edo1z (@edo1z) on CodePen.

HTML5 - Canvas パックマンのモンスターを描くJavaScript関数(1)

xだけをインプットして、yは勝ってに決まってしまういけていないモンスター描画関数です。 See the Pen monster function 1 by edo1z (@edo1z) on CodePen. ちなみにgoogleのPac-Manです。

HTML5 - Canvasで色々な絵をかく(ハートマークからパックマンまで)

Canvasリファレンスや、MDC Docsというやつのチュートリアルを参考に色々な絵をCanvasを使って書いてみよう。下の絵は全部他のサイトからパクってきたものだよ。ちゃんとパクリ先は明示しておきますよ。パクってきたのは、上2つのサイトですよ。HTML5 Canvas…