More actions
imported>beonit No edit summary |
(Repair batch-0008 pages from live compare) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
<!-- MONIWIKI PageList(html5practice) --> | |||
* [[html5practice]] | |||
* [[html5practice/roundRect]] | |||
* [[html5practice/계층형자료구조그리기]] | |||
* [[html5practice/즐겨찾기목록만들기]] | |||
__TOC__ | __TOC__ | ||
== html == | == html == | ||
| Line 61: | Line 65: | ||
} | } | ||
} | } | ||
Latest revision as of 01:40, 27 March 2026
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 는 이용 하였음.
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);
}
}