Difference between r1.3 and the current
@@ -1,6 +1,5 @@
[[pagelist(html5practice)]]
[[tableofcontents]]
* [html5/canvas] 연습임
== html ==
{{{
<html xmlns="http://www.w3.org/1999/xhtml">
[[tableofcontents]]
{{{
<html xmlns="http://www.w3.org/1999/xhtml">
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); } }