DOM Canvas 사각형 그리기

황제낙엽 2016.08.22 07:03 조회 수 : 141

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

사각형 그리기 함수

 

설명 

 fillRect(x, y, width, height);

선택된 DC로 해당 위치에 사각형안에 이미지를 채운다.

 ( DC 는 canvas context에 저장되어 있다 ) 

 clearRect(x, y, width, height); 

 해당 사각형 위치를 지운다. 

 strokeRect(x, y, width, hegith)

 선택된 DC로 해당 위치의 사각형 둘래를 그린다.

 

 

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.fillRect(25, 25, 100, 100);

  12.         ctx.clearRect(45, 45, 60, 60);

  13.         ctx.strokeRect(50, 50, 50, 50);

  14.     }

  15. }

 

결과

스크린샷_2016-06-20_오후_5.05.27.png

 

이 게시물을
목록
쓰기 태그