공부/HTML5
Canvas2 사각형 그리기
Ohming
2011. 11. 4. 23:43
그전에 해 놓은 준비된 캔버스에
추가하면 되는데
여기서 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> |
결과 화면