U E D R , A S I H C RSS

html5practice/round Rect

  1. html5practice/roundRect
  2. html5practice/즐겨찾기목록만들기


1. 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>

2. javascript

  • roundRect function 는 이용 하였음.

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);
    }
}
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2010-10-22 14:20:25
Processing time 0.0826 sec