DOM Canvas 텍스트 그리기

황제낙엽 2016.08.22 07:10 조회 수 : 102

sitelink1 http://blog.naver.com/shadowbug/220741548503 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

텍스트를 그린다.

 

텍스트 그리기 함수

 

설명 

 strokeText(text, x, y)

(x, y) 좌표의 좌상단을 기준으로 텍스트 외각을 그린다.

 fillText(text, x, y) 

(x, y) 좌표의 좌상단을 기준으로 텍스트를 칠한다. 

 

javascript

  1. function draw(target) {

  2.     var canvas = document.getElementById("draw");

  3.  

  4.     // 지원 여부 체크

  5.     if (canvas.getContext) {

  6.         // HTML5에서 canvas를 지원시

  7.  

  8.         // 그리기 오브젝트를 받음

  9.         var ctx = canvas.getContext('2d');

  10.  

  11.         ctx.font = "30px Arial";

  12.         ctx.strokeText("Hello World",10,50);

  13.     }

  14. }

결과

 스크린샷_2016-06-20_오후_10.38.54.png

 

 

이 게시물을
목록
쓰기 태그