border-radius.js - Javascriptライブラリ - HTML5.JP
border-radius.js は、class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなJavaScriptライブラリーです。 CSSでborderとmarginを指定し、class属性に "html5jp-border-radius" を追加するだけで、角が丸くなります。JavaScriptのコードは一切必要ありません。また、このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。 このライブラリーは、指定のブロックボックス要素の上下に角を追加します。Internet Explorerの場合はVMLを、それ以外のブラウザーではCanvas（Canvasがサポートされていれば）を使っています。 ダウンロード Release Date Size (byte) Download
Microdata と Canvas 2D Context API が HTML5 仕様から分離 « HTML5.JP ブログ
今年に入ってから HTML5 仕様のアップデートが激しくなりましたが、今日は大きな変更がありました。 まず、Microdata が HTML5 仕様から分離されました。もう一つ、Canvas 2D Context も別の仕様に分離されました。以前から議論に上がっていた話ですが、ついに決着がついたようです。 これらの仕様はこちらに分離されて公開されています。 HTML5 Microdata HTML5 2D Context なお、HTML5 仕様から canvas 要素が分離したわけではないので誤解しないでください。分離されたのは、2D Context、つまり API の部分です。 Microdata については、これまでグローバル属性として規定されていた関連属性は、HTML5 仕様 から姿を消しています。 取り急ぎ、速報まで。 この投稿は 2010年1月8日 金曜日 4:50 PM に
arc() メソッド - Canvasリファレンス - HTML5.JP
構文 context . arc(x, y, radius, startAngle, endAngle, anticlockwise) サブパスにいくつかの地点を追加します。それらの地点は、引数によって描かれる円周によって描かれる円弧が、指定の開始角度ではじまり、指定の終了角度で終わり、指定の方向に行き、パスに加えられます。そして、直線で直前の地点に接続されます。 指定の半径が負数なら、INDEX_SIZE_ERR を投げます。 仕様 arc(x, y, radius, startAngle, endAngle, anticlockwise) メソッドは、円弧を描きます。コンテキストにサブパスがあれば、このメソッドは、サブパスの最終地点から円弧の開始地点まで直線を引きます。いずれにせよ、円弧の開始地点と円弧の終了地点の間に円弧を描きます。そして、サブパスに円弧の開始地点と終了地点を加えます
さまざまな図形を描く - Canvas - HTML5.JP
Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形（長方形） 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ
createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP
構文 imagedata = context . createImageData(sw, sh) CSS ピクセルで指定された寸法の ImageData オブジェクトを返します（その寸法は、そのオブジェクトからアクセスできる実際のデバイスのピクセルとは異なる数に対応付けられるかもしれません）。返されたオブジェクトにあるすべてのピクセルは、透明な黒となります。 imagedata = context . createImageData(imagedata) 引数と同じ寸法となる ImageData オブジェクトを返します。返されるオブジェクトのすべてのピクセルは透明な黒となります。 引数が null なら、NOT_SUPPORTED_ERR 例外を投げます。 imagedata = context . getImageData(sx, sy, sw, sh) canvas の指定の矩形に対す
fillRect() メソッド - Canvasリファレンス - HTML5.JP
構文 context . fillRect(x, y, w, h) canvas 上の指定の矩形を、現在の塗りつぶしスタイルを使って、塗りつぶします。 仕様 矩形をビットマップに即座に描画するメソッドが 3 つあります。それぞれ 4 つの引数をとります。最初の 2 つには、矩形の左上端の x 座標と y 座標を与えます。次の 2 つには、矩形の幅 w と 高さ h を与えます。 現在の変形マトリックスは、次の 4 つの座標に適用されなければけません。これらの座標は、指定された矩形を取得するために閉じられるパスを形成します: (x, y), (x+w, y), (x+w, y+h), (x, y+h)。 現在のパスに影響を与えることなく、形状が描画されます。そして、この形状は、クリッピング領域の対象となります。clearRect()は除きますが、シャドー効果、グローバル・アルファ、グローバル
Javascript ライブラリー - HTML5.JP
HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。 <meter> polyfill (jQuery プラグイン) <meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。 html5detector (Google Chrome Extentions) html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
円形グラデーションを指定する - Canvas - HTML5.JP