CSS3 の Transforms プロパティを使って簡単 3D Cube 表示

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Chrome が version 12 になったときにテンションが上がって作ったサンプルです.

それまでは Safari でしかサポートされていなかった CSS3 による Z軸の奥行き表現が Chrome でも使えるようになり, より CSS3 による豊かな表現が可能になりました.

作ったのはよかったのですが, それから仕事が忙しくなり半年間放置してたってのは反省…

iPhone でも普通に動くのでよかったら参考までに. iPhone は webkit をサポートしてない(正確にはネイティブ起動のsafariでは動くらしいが…)ので標準での 3D 表現って意味では唯一の方法かも.

Read More

getElementById や querySelector といったメソッドを使いやすくするスクリプト『tm.dom.js』の紹介

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

前回, 『Selectors API の querySelector/querySelectorAll を使ってみよう』というエントリーを書きましたが, 今回はそれをより使いやすくするスクリプトを紹介したいと思います.

document.getElementById や document.querySelectorAll なんて長くて毎回書いてらんねぇって人に オススメのスクリプトです.

とはいってもそれぞれのメソッドをラップしただけのシンプルなスクリプトです. shorthand としてお使いください.

ちなみに今回紹介する『tm.dom.js』は今制作中のライブラリからの抜粋したものだったりします.

Read More

Selectors API の querySelector/querySelectorAll を使ってみよう

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Selectors API の querySelector/querySelectorAll を使ってみよう.

querySelector/querySelectorAll とは, CSS セレクタを指定して要素を取得できるメソッドです. 今後, getElementById や getElementsByClassName に代わる重要なメソッドとなるでしょう.

とても便利なのになかなか普及しないんだよなぁ~. 知名度も低くいみたいなのでざっくりまとめてみました.

Read More

HTML5 Canvas で Star Polygon(星型多角形)描画

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

またまたライブラリから抜粋. 今回は前回に引き続き Canvas 関連についてです.

前回, Polygon を描画する関数を作りましたが, 今回はそれを少しいじって Star Polygon(星型多角形)を描画する関数を作ります.

Read More

HTML5 Canvas で Polygon(多角形)描画

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

今, JavaScript のゲームライブラリを制作しています.

まだ公開前ではありますが, 整理がてら その中からチョコチョコと機能を晒していこうと思います.

では早速, 今回は Polygon(多角形) を描画するサンプルを作りました. この多角形描画処理を使えば簡単に下図のようなキレイな三角形や色々な多角形を描画することができます.

Read More