★Canvasリファレンス
setTransform(a, b, c, d, e, f)メソッドのそれぞれの引数は、 setTransform(伸縮x, 傾斜y, 傾斜x, 伸縮y, 移動x, 移動y)となります。 何も変形しない場合の引数の値は、setTransform(1, 0, 0, 1, 0, 0)となります。 setTransform()メソッドでは、 scale()・ rotate()・ translate() をまとめて指定することができます。 rotate()は回転ですが、setTransform()の引数に三角関数を利用して伸縮と傾斜を組み合わせることで回転結果を得られます。 それぞれの個別メソッドとsetTransform()メソッドとの関係は以下の通りです。 scale(x, y)は、setTransform(x, 0, 0, y, 0, 0)と同じ rotate(angle)は、setTran
Web Workersで遊んでみた - NullPointer's
HTML5を含む次世代Web規格の一環として、ページ描画・処理のバックグラウンドで処理を実行できるWeb Workersという仕様が策定されています。 Web Workers Using web workers - MDC 既にFirefox 3.5やSafari 4等では一部の機能が実装されているそうなので試してみました。Web Workersでエラトステネスの篩を実行し、素数を探す簡単なJavaScriptです。普通JavaScript実行中はブラウザ操作ができなくなりますが、Web Workersを使うと、ページ描画とは別スレッドで実行されるため、ブラウザが固まりません。 https://nullpon.moe/dev/sample/html5/workers/ Safari 4のNitroエンジンの処理速度は異常ですね…、1000000以下の最大素数の計算でFirefoxと比べて約
)
DOM ストレージの概要
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 DOM ストレージ API には、ドキュメント オブジェクト モデル (DOM) を使用してクライアント サイド データをセキュアに保存するための関連メカニズムとして、 sessionStorage および localStorage の 2 つが含まれています。 これらのオブジェクトは Internet Explorer 8 で導入されました。 メモ : Internet Explorer の従来のバージョンでは、永続的なデータ記憶域の実装に userData 動作が使用されていました。 このトピックは、次の各セクションで構成されています。 DOM ストレージについて DOM ストレージのスクリプティング オ
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
Poturi : SVG
SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィックスです。テキストファイルなので、簡単な図形ならばエディタだけでさっと描けてしまいます。JavaScriptやCGIなどとの連携もしやすく、Flashよりもずっと手軽なので、大きな可能性を秘めていると思います。 OperaとFirefoxはSVGに正式対応しています。Firefoxはまだ開発段階のようで一部の機能が使えません。現段階ではOperaの表示が一番安定しているようです。IEでは、AdobeのSVG Viewerをインストールすると表示できるようになります（2005年で開発が止まっています）。 参考URL Scalable Vector Graphics (SVG) 1.1 Specification Scalable Vector Graphics (SVG) 1.1 仕様（
WebKitの３D回転をざっくりまとめてみた - livedoor Blog（ブログ）
MobileWebKitで要素を回転させる系のCSSをざっくりまとめてみました。PC版のsafariではまだ実装されていないみたいです。iPhone/Android向けサイトで使ってみるといいと思います。 CSS Transform/Transitionの基本 -webkit-transformで２次元や３次元の位置や角度、倍率を規定する。-webkit-transitionで-webkit-transformが変化する時のアニメーションを規定する。 流れとしては-webkit-transitionを決めた後に-webkit-transformを変化させる感じ。 javascriptから操作する時は-を省略して二文字目以降を大文字にする。 CSS:-webkit-backface-visibility:hidden; JS:hogehoge.style.webkitBackfa
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
iOS 4.2×localStorageで作るGPSレコーダー (1/5)
iOS 4.2が出て3か月ほど経過しました。iOS 4.2ではJavaScriptで加速度センサーを扱えるなど便利になった反面、以前に比べて不便になった面もあります。1つが、内蔵データベースであるSQLiteです。HTML5の仕様からWeb SQL Databaseが廃止されたためでしょうか、iOS 4.2ではJavaScriptからSQLiteへのアクセスができなくなりました。そのため、本連載の第2回で作成した、SQLiteを使ったGPSレコーダーは動作しなくなっています。
グーグルがHTML5のMicrodataに早くも対応
Microdataは、HTMLにメタデータを埋め込むための記述方法です。HTML5の仕様の一部として策定が開始され、現在はW3CのHTML5仕様からは独立した仕様となっています。 そのMicrodataをグーグルが読み取って「リッチスニペット」に利用すると、ブログ「Google Webmaster Central Blog」のエントリ「Microdata support for Rich Snippets」で明らかにしました。 リッチスニペットのデータとしてMicrodataを読み込み リッチスニペットとは、検索結果に表示される情報です（ただしすべての結果に表示されるわけではありません）。 上記の例（グーグルのリッチスニペットのページから）では、ネット上のレビュー記事をグーグルが自動的に集計して、星の数を表示しています。 このリッチスニペットを構成するために、グーグルはネット上のさまざまな
Ajaxページへのパーマリンクを#!なしで実現する - yamasaのネタ帳
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場 Ajaxを多用しつつパーマリンクも提供しているサイトのURLは、「#!ほげほげ」のような形式になっていることがよくあります。上の記事に書かれているように、これにはちゃんと理由があるわけなんですが、やっぱり「#!なんてのが含まれるURLは格好悪い」と感じる人も多いようです。 そこで、「#!ほげほげ」なんてURLを使わなくてもAjaxの画面遷移を実現する、Session HistoryというHTML5の機能を紹介します。 Session history demo ChromeやSafariで上のページにアクセスし、地図をドラッグしてみてください。地図を動かすたびにURLが変化しているのに気づくでしょう。そこでブラウザの戻るや進むキーを押すと、地図の移動履歴を辿
The HTML5 test - How well does your browser support HTML5?
HTML5test how well does your browser support HTML5? Your browser Other browsers Compare News Device Lab About the test The HTML5 test score is an indication of how well your browser supports the HTML5 standard and related specifications. Find out which parts of HTML5 are supported by your browser today and compare the results with other browsers. The HTML5 test does not try to test all of the new
deanm/pre3d @ GitHub
Pre3d, a JavaScript 3d rendering engine Play with an application built using Pre3d, like GraphyCalc. See a demo like monster, colorscube, lorenz84, or gji. View technical samples like spin ring, textured cube, extruded sphere with normals, 3d cubic bezier spiral, or slink. Get the latest code from the git repository, as a zip file, or as a tarball. Keep in touch on the mailing list. Email the auth
canvasの命令を使って画像を回転させる - 強火で進め
以下のサイトやライブラリを参考にHTML5で導入されたcanvas処理を使って画像を回転処理を行うプログラムを作ってみました。 こちらでプログラムの動作を確認できます。 ライブラリ ExplorerCanvas http://sourceforge.net/project/showfiles.php?group_id=163391 ※ExplorerCanvasについてはこちらを参照して下さい。 Canvas - Canvasの使い方 - HTML5.JP http://www.html5.jp/canvas/how.html 参考にしたサイト Canvas - 画像を組み込む - HTML5.JP http://www.html5.jp/canvas/how6.html Canvas - Canvasリファレンス - HTML5.JP http://www.html5.jp/canvas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alteredq: A WebGL Ninja - Frontend Web Developer, Oxfordshire, UK - Matt Hobbs)
userData Behavior (A, ABBR, ACRONYM, ...)
Mr Speaker presents: Parcycle. A HTML5 Canvas Particle System
Mr.doob
http://www.ac.auone-net.jp/~siny/htmlcss/draganddrop.html