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>










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





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

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ