336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
그전에 해 놓은 준비된 캔버스에
추가하면 되는데
여기서 ctx.fillStyle에 rgba가 들어가도 되는데 그렇게 되면 앞에 숫자 세곳은 rgb가 되고 네번째 숫자는 a(투명도)가 된다. 그래서 0은 완전투명, 1은 불투명, 0.5는 반투명이 된다.
그리고 rgb는 '#FFFFFF'와 같이 16진수 코드를 사용할수도 있다.
Canvas에 사각형을 그릴 때 사용되는 함수의 속성에는
fillRect - 가득 찬 사각형을 그릴 때 사용
strokeRect - 사각형의 테두리만 그릴 때 사용
clearRect - 지정된 영역을 투명하게 지울 때 사용
결과 화면
| ctx.fillStyle = "rgb(0,0,255)"; //어떤 색을 채울 것인지 RGB값 설정 ctx.fillRect(10, 10, 100, 100); //사각형 그리기 시작점, 끝점 좌표 설정 |
여기서 ctx.fillStyle에 rgba가 들어가도 되는데 그렇게 되면 앞에 숫자 세곳은 rgb가 되고 네번째 숫자는 a(투명도)가 된다. 그래서 0은 완전투명, 1은 불투명, 0.5는 반투명이 된다.
그리고 rgb는 '#FFFFFF'와 같이 16진수 코드를 사용할수도 있다.
Canvas에 사각형을 그릴 때 사용되는 함수의 속성에는
fillRect - 가득 찬 사각형을 그릴 때 사용
strokeRect - 사각형의 테두리만 그릴 때 사용
clearRect - 지정된 영역을 투명하게 지울 때 사용
| <!DOCTYPE HTML> <html> <head> <title>Canvas 공부</title> <script type="text/javascript"> var make_canvas = function(){ //페이지가 열리자마자 호출될 make_canvas 함수 var exam = document.getElementById('exam'); var ctx = exam.getContext('2d'); ctx.fillStyle = "rgb(0,0,255)"; //어떤 색을 채울 것인지 RGB값 설정 ctx.fillRect(10, 10, 100, 100); //사각형 그리기 시작점, 끝점 좌표 설정 }; </script> <style type = "text/css"> #exam { border : 1px solid #000000; } </style> </head> <body onload = "make_canvas();"> <canvas id = "exam" width = "200" height = "200"></canvas> </body> </html> |
결과 화면
'공부 > HTML5' 카테고리의 다른 글
| 그림자와 그라데이션 구현하기 (0) | 2011.11.05 |
|---|---|
| Canvas3 선 긋기 (0) | 2011.11.05 |
| Canvas1 그림 그리기 준비 (0) | 2011.11.04 |
| 시멘틱 웹 [semantic web] (0) | 2011.11.04 |
| 블록레벨 요소와 인라인 요소 (0) | 2011.11.04 |
댓글