Html5practice/roundRect - Revision history

Maintenance script: Repair batch-0008 pages from live compare

2026-03-27T01:40:37Z

Repair batch-0008 pages from live compare

← Older revision		Revision as of 01:40, 27 March 2026
Line 1:		Line 1:
	~~[[pagelist~~(html5practice)~~]]~~		<!-- MONIWIKI PageList(html5practice) -->
			* [[html5practice]]
			* [[html5practice/roundRect]]
			* [[html5practice/계층형자료구조그리기]]
			* [[html5practice/즐겨찾기목록만들기]]
	__TOC__		__TOC__
	== html ==		== html ==

Maintenance script: Repair MoniWiki formatting after migration

2026-03-26T14:01:49Z

Repair MoniWiki formatting after migration

← Older revision		Revision as of 14:01, 26 March 2026
Line 61:		Line 61:
	}		}
	}		}

imported>beonit at 14:20, 22 October 2010

2010-10-22T14:20:25Z

← Older revision		Revision as of 14:20, 22 October 2010
Line 1:		Line 1:
	[[pagelist(html5practice)]]		[[pagelist(html5practice)]]
	__TOC__		__TOC__
	* [[html5/canvas]] 연습임
	== html ==		== html ==
	<html xmlns="http://www.w3.org/1999/xhtml">		<html xmlns="http://www.w3.org/1999/xhtml">

imported>beonit at 14:20, 22 October 2010

2010-10-22T14:20:11Z

← Older revision		Revision as of 14:20, 22 October 2010
Line 1:		Line 1:
	[[pagelist(html5practice)]]		[[pagelist(html5practice)]]
	__TOC__		__TOC__
			* [[html5/canvas]] 연습임
	== html ==		== html ==
	<html xmlns="http://www.w3.org/1999/xhtml">		<html xmlns="http://www.w3.org/1999/xhtml">

imported>beonit at 14:19, 22 October 2010

2010-10-22T14:19:48Z

← Older revision		Revision as of 14:19, 22 October 2010
Line 1:		Line 1:
	[[pagelist(~~html5practive~~)]]		[[pagelist(html5practice)]]
	__TOC__		__TOC__
	== html ==		== html ==

imported>beonit at 14:19, 22 October 2010

2010-10-22T14:19:34Z

New page

[[pagelist(html5practive)]]
__TOC__
== html ==
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas test</title>
<script src="test.js" language="javascript" type=""></script>
</head>
<body onload="main()" style="background-color:gray">
<canvas id="canvas"/>
</body>
</html>
== javascript ==
* roundRect function 는 [http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html 이용] 하였음.
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
if (stroke) {
ctx.stroke();
}
if (fill) {
ctx.fill();
}
}

function nodeDraw(ctx, text, pos){
console.log("text : " + text + " pos : " + pos.x + ", " + pos.y);
calcRt = ctx.measureText(text);
oldFill = ctx.fillStyle;
console.log(calcRt.width);
roundRect(ctx, pos.x-2, pos.y-2, calcRt.width + 6, 15 + 6, 5, true, true);
ctx.fillStyle = "black";
ctx.fillText(text, pos.x, pos.y);
ctx.fillStyle = oldFill;
}

function main(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.font = "15px sans-serif";
ctx.textBaseline = "top";
ctx.fillStyle = "yellow";
var pt = {x:100, y:40};
nodeDraw(ctx, "hello canvas", pt);
}
}