SQLの窓

2011年04月02日


HTML5 : canvas 要素に画像をロードする

IE9 はまだ製品候補版ですし、そもそも IE8 では canvas は実装されていませんが、
今後は IE9 をターゲットとしていろいろなものが作られるでしょうから、今のうち
に IE8 でもある程度は慣れておいたほうがいいと思います。

もちろん、HTML5 を想定した場合は、Firefox 等、IE 以外を使うのがテストの上で
は間違いありませんが、IE8 以下のシェアを無視できるほど提供側の懐は豊かでは
無いので、ガンガンに HTML5 を使わない場合は考慮しなければなりません。

excanvas.js は、そんな IE8 以前の為のライブラリで、完全に IE を無視できない
人の為にあります。プログラムで「ふり」をしているので、動的に canvas を作る
場合はちょっと解りません。そこまで調べる必要があるほど、IE8 の価値はもう無
いのでは無いかとも思うのも事実ですし。

<!--[if lte IE 8]>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script>
<canvas id="c1" width="334" height="80"></canvas>
<![endif]-->
<div id="target"><input type="button" value="CANVAS + 画像表示テスト" onclick='drawMyImage()'><br></div>
<script type="text/javascript">
function drawMyImage() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		canvas = document.getElementById('c1'); 
		if ( ! canvas || ! canvas.getContext ) {
			return false; 
		}
	}
	else {
		canvas.setAttribute("width", "334");
		canvas.setAttribute("height", "80");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "http://winofsql.jp/image/logical_error.png?" + new Date().getTime();
	img.onload = function() {
		ctx.drawImage(img, 0, 0);  
	}
}
</script>
関連する記事

HTML5 : 画像にテキストを重ねて少し回転して
「名前を付けて画像を保存」するとどうなるか


posted by lightbox at 2011-04-02 21:24 | HTML5 | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり