SQLの窓

2011年05月28日


Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )

CSS で実装するほうがはるかに簡単ですが、JavaScript でベタな描画する方法です。まず最初に線幅と角丸の半径を使って、上下左右の直線を引いた後、円弧を4隅に描画しています。( 角丸の無い場合でも、円弧の描画は必要です )
★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装

この文章の下側で、角丸BOX が描かれています
<div style='position:relative;height:200px;'>
	<div id="target" style='position:absolute;left:0;top:0'></div>
	<div style='position:absolute;left:0;top:0;padding:15px'>
		<b style='color:#ff0000'>★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装</b><br><br>
		<b style='color:#0000ff'>この文章の下側で、角丸BOX が描かれています</b>
	</div>
</div>
<script type="text/javascript">

// CANVAS を作成
var canvas = document.createElement("canvas");
// 幅と高さを設定
canvas.setAttribute("width", "500");
canvas.setAttribute("height", "200");
// 初期化
if ( ! canvas || ! canvas.getContext ) {
	G_vmlCanvasManager.initElement(canvas);
}
// CANVAS を ターゲットの Child として追加
document.getElementById("target").appendChild(canvas)

// 2D 処理の準備
var ctx = canvas.getContext('2d');

box( ctx, 0, 0, 500, 200, 5, 15 )

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

	// 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>



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

Microsoft Office
container 終わり

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

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