Silk was made by Yuri Vishnevsky, with music and sound crafted by Mat Jarvis. Art shared with Silk is licensed under Creative Commons. If you enjoyed Silk, please let me know!
HTML5でスマホアプリを作ってみるシリーズ第2回目。ちなみに前回は以下です。 HTML5でスマホアプリを作ってみよう。第1回「じゃんけんゲーム」 今回のテーマは「加速度センサ」です。 前提条件 前提条件として、ある程度HTML等が分かる人向け、という感じです。また、レンタルサーバの利用等についても割愛です。その辺の詳細な説明は省いてるのでご了承ください。また、第1回目のチュートリアルの内容を踏まえた内容にしてます。 HTML5でスマホアプリを作ってみよう。第1回「じゃんけんゲーム」 何度も同じことを書くと長くなるので・・・ご了承ください。基礎情報や基本の詳細は以下をご覧ください。 HTML5でゲームを作りたい時に参考になりそうな記事のメモ前から気になってたHTML5について色々調べてみました 加速度センサーを使ってみる 前回の基本部分の「onload = function() 」部分を以
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って? ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く