[[pagelist(html5practice)]]
[[tableofcontents]]
* [html5/canvas] 연습임
== html ==
{{{
canvas test
}}}
== 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);
}
}
}}}