html5 canvas를 사용할 때 자바스크립트(javascript)로 여러 줄 텍스트(multiline text)를 표시할 방법이 없어서 함수를 만들어보았다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
ctx.font="15px Consolas";
drawTextBox(ctx, "다람쥐 헌 쳇바퀴에 타고파\n다람쥐 헌 쳇바퀴에 타고파", 100, 100, 170, 1.2)
 
function drawTextBox(ctx, text, x, y, fieldWidth, spacing) {
  var line = "";
  var fontSize = parseFloat(ctx.font);
  var currentY = y;
  ctx.textBaseline = "top";
  for(var i=0; i<text.length; i++) {
    var tempLine = line + text[i];
    var tempWidth = ctx.measureText(tempLine).width;
 
    if (tempWidth < fieldWidth && text[i] != '\n') {
      line = tempLine;
    }
    else {
      ctx.fillText(line, x, currentY);
      if(text[i] != '\n') line = text[i];
      else line = "";
      currentY += fontSize*spacing;
    }
  }
  ctx.fillText(line, x, currentY);
  ctx.rect(x, y, fieldWidth, currentY-y+fontSize*spacing);
  ctx.stroke();
}
cs





fillText()가 한 줄 짜리 텍스트만 출력할 수 있으므로 이를 여러 번 써서 멀티라인 텍스트필드처럼 보이도록 만드는 것이다.


코드의 동작 방식은 아래와 같다.

1) 임시변수(tempLine)에 쓸 문자열을 한개씩 더한다.

2) 더하면서 캔버스 컨텍스트의 measureText()를 이용하여 너비를 재고, 이것이 지정된 텍스트필드 너비를 넘었을 경우 한 줄을 fillText()로 화면에 그린다.

3) 매개변수로 입력받은 행간격 비율(spacing)만큼 아래로 간격을 띄워서 1)부터 반복한다.


1)에서 개행문자('\n')을 만났을 경우에도 줄바꿈을 한다.




전체 소스코드는 아래 링크에 업로드하였다.

https://github.com/tibyte/algorithms/tree/master/html5canvas-textfield





실행결과는 아래와 같다.







인터넷 익스플로러 9 이상에서 보일겁니다. (모바일에선 잘 안됩니다)


 








2차주소를 구입하여 설정해도, tibyte.tistory.com과 같은 주소로 접속하면
주소창의 주소가 2차주소가 아닌 1차주소로 보여지게 됩니다.

<head>태그나 <body>태그 안에 아래와 같은 자바스크립트를 추가하면 1차주소로 접속했을 때 
자동으로 2차주소로 바뀌게 할 수 있습니다.


<script language = javascript>

var url1 ='1차주소';
var url2 ='2차주소';
if(document.URL.match(url1)) document.location.href = document.URL.replace(url1, url2);

</script>


변수 url1에  1차주소를,
변수 url2에  2차주소를 지정합니다.
match 함수를 사용하여 URL이 url1을 포함하고 있는지 검사하고, 있으면, 기존주소에서  url1과 같은 부분을 url2로 치환한 주소를 현재 주소로 합니다.



아래는 사용예시입니다.
===================================================================================================
<script language = javascript>

var url1 ='tibyte.tistory.com';
var url2 ='www.tibyte.kr';
if(document.URL.match(url1)) document.location.href = document.URL.replace(url1, url2);

</script>
==================================================================================================





copyright(C)www.tibyte.kr

+ Recent posts

티스토리툴바