HTML5 : Canvas : Box

  HTML5 : Canvas : 範囲内に収まる四角形



線の太さは、座標を中心として両側に広がるので、線幅の半分のサイズ分内側で描画する必要があります

▼ 以下は Firefox で取得した画像です

<div style='position:relative;width:500px;height:100px;border:solid 1px #f00;'>
<div id="target" style='position:absolute;left:0;top:0'></div>
</div>
<script type="text/javascript">
onload=drawMyBox;

function drawMyBox() {
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", "500");
	canvas.setAttribute("height", "100");
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 400, 28, 2 );

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

		c.beginPath();
		c.strokeStyle = "#000000";
		c.rect(x+(lw/2), y+(lw/2), w-lw, h-lw);
		c.lineWidth = lw;
		c.stroke();
	}

}

</script>



  HTML5 : Canvas : 四角形の両端に文字描画



フォントサイズが大きすぎる場合は、フィットせずにはみ出てしまいますが、設計画面用の入力フィールド
を作成する事を想定しています。( ※ 計算式は厳密ではありません )



<div style='position:relative;width:500px;height:100px;border:solid 1px #f00;'>
<div id="target" style='position:absolute;left:0;top:0'></div>
</div>
<script type="text/javascript">
onload=drawMyBox;

function drawMyBox() {
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", "500");
	canvas.setAttribute("height", "100");
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 450, 26, 1, "愛" );
	box( ctx, 0, 30, 450, 40, 1, "愛" );

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

		c.beginPath();
		c.strokeStyle = "#000000";
		c.rect(x+(lw/2), y+(lw/2), w-lw, h-lw);
		c.lineWidth = lw;
		c.stroke();

		c.beginPath();
		c.font = "bold "+ (h-10) + "pt 'MS Pゴシック'";
		var m = c.measureText(s);
		c.fillText( s, x+4, y+h-5 );
		c.fillText( s, w - m.width-4*2+4, y+h-5 );
		c.stroke();

	}


}

</script>











  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ