반응형

웹프로그래밍/Canvas 2

캔버스 그리기 및 스타일링

다양한 도형 그리기const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 원 그리기 ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); // 사각형 그리기 ctx.beginPath(); ctx.rect(200, 50, 100, 100); ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.stroke(); // 삼각형 그리기 ctx.beginPath(); ctx.moveTo(300, 200); ctx.lineTo(350, 250); ctx.lineTo(..

HTML 캔버스 기본

는 HTML5에서 추가된 요소로, 그래픽을 렌더링하기 위한 영역을 제공합니다. 캔버스는 JavaScript를 사용하여 동적으로 그림을 그리고 상호작용할 수 있는 강력한 도구입니다. 의 주요 속성width: 캔버스의 가로 크기를 지정합니다.height: 캔버스의 세로 크기를 지정합니다.id: 캔버스 요소의 고유한 식별자를 설정합니다.class: CSS 스타일링을 위한 클래스를 설정합니다.style: 인라인 스타일을 적용할 수 있습니다. 의 사용법위의 코드는 가로 너비가 800 픽셀이고 세로 높이가 600 픽셀인 캔버스를 생성합니다. id 속성을 사용하여 캔버스를 JavaScript에서 참조할 수 있습니다.JavaScript에서 캔버스 사용하기캔버스를 사용하여 그래픽을 그리려면 JavaScript를 사용하..

반응형