- <html>
- <head>
- <script type="application/javascript">
- function draw() {
- var canvas = document.getElementById("canvas");
- if (canvas.getContext) {
- var ctx = canvas.getContext("2d");
-
- ctx.fillStyle = "rgb(200,0,0)";
- ctx.fillRect (10, 10, 55, 50);
-
- ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
- ctx.fillRect (30, 30, 55, 50);
- }
- }
- </script>
- </head>
- <body onload="draw();">
- <canvas id="canvas" width="150" height="150"></canvas>
- </body>
- </html>
미리보기
간단한 설명을 하자면
캔버스를 만들고 그곳에 2d컨텍스트를 받아온뒤
fillStyle 메소드와 fillRect 메소드를 이용하여 빨간색과 파란색 사각형을 그려주는 예제입니다.
각각의 메소드에 관해서는 각자 자료를 찾아보거나 한국HTML5그룹 api 게시판에서 차후에 정리하여
올릴계획입니다.
위의 사각형은 범위의 일부분이 겹치게 되는데요.
속성에따라 겹치는 부위가 위로 올라가거나 아래로 내려가거나 겹치는 부분만 비울수도 있고
여러가지 변수가 존재하지만 해당내용은 다음번 강좌에서 다루도록 하겠습니다.
위의 소스를 실행해보시면 두가지 영역이 겹치는 곳은 색이 합쳐지도록 되어있습니다.
