SQLの窓

2011年05月28日


Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く

ExplorerCanvas を使用しています。動的にエレメントを作成する為に G_vmlCanvasManager.initElement を使用しています。

※ ExplorerCanvas は、古い IE 用のライブラリなので、今後使う事はあまり発生しないと思います。

<!--[if lte IE 8]><script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script><![endif]-->
<div id="target"><input type="button" value="IE8も BOX の内側を指定の太さで線を引く(角丸)" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", "200");
	canvas.setAttribute("height", "300");
	if ( ! canvas || ! canvas.getContext ) {
		G_vmlCanvasManager.initElement(canvas);
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 20, 10 )

	function box(c,x,y,w,h,lw,sz) {

		c.beginPath();
		c.moveTo(x+(lw/2)+sz, y+(lw/2));
		c.lineTo(x-(lw/2)+w-sz, y+(lw/2));
		c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);
		c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);
		c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);
		if ( sz == 0 ) {
			c.moveTo(x+(lw/2), y+h-sz);
		}
		else {
			c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
		}
		c.lineTo(x+(lw/2), y+(lw/2)+sz);

		c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
		c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>

関連する記事

CSS3 の角丸を IE8以前でも使うには( ブログで使うには )


posted by lightbox at 2011-05-28 08:09 | HTML5 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり