そうだ-webkit-canvasを使おう!!!!!(イミフ)

最近、休日は「そうだ旅(どっか)に行こう。」「やすとものどこい」をみてしまう大熊猫です。
とりあえず白浜にパンダを見に行きたいです。

ここ最近、スマートフォン用のアニメーションをJavaScriptで作る事になったので色々と調査をしていたのですが、偶然こんなものを見かけました。

background: -webkit-canvas(mycanvas);

調べてみると「webkit-canvas」というwebkitの独自仕様で、これを使うとCSSで背景画像
としてCanvasを扱えるというものでした。

試しに簡単なサンプルを作ってみました。

サンプルはこちら

サンプルの概要

サンプルの概要はご覧のとおりです。

HTML

HTMLにまず対象となる要素を用意します。

CSS

CSSは以下の通りです。

#contents {
	background: -webkit-canvas(mycanvas);
	width: 300px;
	height: 300px;
}

「webkit-canvas(id)」で背景に読み込むをcanvas(今回はmycanvas)を指定しています。

JavaScript

JavaScriptの以下の通りです。

var context = document.getCSSCanvasContext("2d", "mycanvas", 300, 300);
context.beginPath();
var grad  = context.createRadialGradient(70,70,20,70,70,70);
grad.addColorStop(0,'red'); 
grad.addColorStop(0.5,'yellow');
grad.addColorStop(1,'blue');
context.fillStyle = grad;
context.rect(0,0, 140,140);
context.fill();

描画処理を行う記述は通常のCanvas APIの使い方と変わりません。

ポイントはこの部分

var context = document.getCSSCanvasContext("2d", "mycanvas", 300, 300);

通常canvas APIにアクセスし描画するためのには「getContext()」メゾットを利用しますが
このサンプルでは「getCSSCanvasContext()」メゾットを利用しています。
「getCSSCanvasContext()」メゾットはCSSで指定した任意のcanvas(今回はmycanvas)を元に、そのCanvasのContextを取得します。

これで背景画像としてcanvasを指定する事ができます。

使い道は?

現在、モダンブラウザではCanvas APIは殆ど対応しているので
PCの環境を想定した場合は使い道はほとんどありません。

しかし、これを使えばCanvasの対応が未完全な古いバージョンのAndroid OS2.1※でもCanvasを表示できます。
そのため、広範囲のユーザーをターゲットとするゲームコンテンツなどでは、利用されるケースもあるようです。

※手元のAndroid2.1では確認出来ましたが、必ずとは断言はできません。なんせAndroidは・・・・・・察してくださいm(_ _)m

ちなみにFirefoxにも

-moz-element();

Firefoxにも「moz-element()」と言うものが用意されていたようです。

参考記事