Fabric.js·Canvasで2Dオブジェクトを自在に描画/操作 MOONGIFT
HTML5の新機能であるCanvasですが、HTMLとは随分使い勝手が違うためになかなか手出ししづらいのではないでしょうか。2D/3Dのどちらも扱えますが、3Dになるとさらに敷居が高くなりますので、まずは2Dから入るのが良さそうです。 Canvas内で2Dオブジェクトを描くのに使えるライブラリがFabric.jsです。Fabric.jsを使ってCanvasを積極的に使ってみましょう。 Fabric.jsの使い方 デモです。様々な描画が行われています。 SVGを描くこともできます。キャッシュ機能を使うと多くのオブジェクトもスムーズに動かせます。 影をつけるデモです。アニメーションもします。 データをJSONで出力できます。 こちらはSVGでの出力結果。 Fabric.jsでは文字や画像の描画、マウスイベント、アニメーション、オブジェクトのグルーピング、マウスによる変形など様々な操作ができるよ
iPhoneの加速度センサーをJavaScriptで取得してみたよ | CYBER BALLAD
前回はiPhoneのタッチイベントをJavaScriptで取得してみたけど、その流れで加速度センサーの値を取得するのも簡単だったのでやってみたよ。端末の仕様には詳しくないため、加速度センサーの説明は間違いがあるかもしれないのでそれなりで読んでね。 つくるもの iPhoneの傾きや加速度センサーの値を取得 iPhone4の加速度センサー iPhone4には加速度センサーが内蔵されていて、本体を傾けたり降ったりする動きを検出できる。iPhone4内蔵のSafariはこのセンサーにアクセスするAPIが搭載されていて、JavaScriptでこのセンサーから値を取得・利用できる。検出できる値は以下のような感じ。 acceleration:加速度センサー。X・Y・Zの各方向に動かしたときの加速度を検出する。本体の左右がX軸、本体の上下がY軸、本体の前面と背面がZ軸だ。 accelerationIncl
エジプト治安部隊 デモ隊を強制排除 NHKニュース
エジプトの首都カイロで、軍による事実上のクーデターに抗議して座り込みを続けてきたデモ隊に対して治安部隊が強制排除に乗り出し、多数の死傷者が出ている模様です。 エジプトの治安部隊は１４日朝（日本時間の１４日午後）、軍による事実上のクーデターで大統領職を解任されたモルシ氏の支持者が抗議の座り込みを続けていたカイロ市内の２か所の広場に突入しました。 治安部隊は催涙ガスを放ったり、ブルドーザーを使ってテントを壊したりして抗議デモの参加者の強制排除に乗り出しています。 モルシ氏を支持するイスラム組織、ムスリム同胞団は、少なくとも１５人のデモの参加者が死亡したとしています。 一方、国営テレビは内務省の発表として、これまでに警察官２人が死亡したと伝えています。 また、内務省は２か所の広場のうち１か所を制圧したとしています。 エジプトでは先月３日の事実上のクーデター以降、エジプト軍が主導して暫定政府を発足
「トルコ在住の女性がデモの現状を世界に知ってほしいと撮影した写真が海外掲示板で話題に」海外の反応 : 暇は無味無臭の劇薬
Comment by guessucant 仲の良い友人が今トルコに住んでる。 これは彼女が送ってきた写真。世界の人に知らせてほしいって頼まれた。 イスタンブールの現在の様子。 ＜関連記事＞ 過去数年で最大規模となった今回のデモは、政府によるイスタンブールのタクシム広場の再開発計画に対する抗議活動が発端となり、イスラム色の強いエルドアン政権に対する反政府デモに拡大した。ただ、デモの中心地となっているタクシム広場では、警察が１日夜に装甲車を撤収させたことを受け、２日の抗議活動は前日より落ち着いた様子となっている。 医療関係者によると、これまでの負傷者はイスタンブールで１０００人以上、アンカラでは数百人に上るという。 エルドアン首相は１日のテレビ演説で、「政府の方針に抗議するのであれば、法と民主主義の範囲内で行うべきだ」と強調したほか、警察は適切な武力行使を行う権利を有すると述べた。また、広場
[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
Rotating color cube box with CSS3 animation, transforms and gradients
Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hovering the viewport with the mouse, simply refresh the browser to restart the animation. All images used come from WISE - Multimedia Gallery and are used in th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
