코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML5 Multimedia Canvas</title> </head> <body> <h1>canvas 요소에 사각형 그리기</h1> <canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300"> 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다! </canvas> <script> var paper = document.getElementById("drawCanvas"); var context = paper.getContext("2d"); context.strokeRect(10, 10, 250, 130); context.fillStyle = "rgba(255,0,0,1)"; context.fillRect(20, 20, 200, 100); context.clearRect(30, 30, 150, 50); </script> <p> 가장 바깥쪽에 strokeRect() 함수를 사용하여 선만으로 이루어진 사각형을 그립니다.<br> 그 다음에는 fillRect() 함수를 사용하여 빨간색으로 채워진 사각형을 그립니다.<br> 가장 안쪽에는 clearRect() 함수를 사용하여 사각형 모양으로 안의 내용을 지워줍니다. </p> </body> </html>
