1. html에 canvas 요소 작성
<body onload="drawMyCanvas();">
<canvas id="myCanvas"></canvas>
</body>
2. js로 canvas를 세팅
function drawMyCanvas(){
let canvas = document.getElementById("myCanvas");
// 어떤 콘텐츠를 그릴 것인가
let ctx = canvas.getContext("2d");
// 캔버스 사이즈, 배경색 등 설정
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = "lightyellow"
}
1. 사각형 메서드
ctx.strokeRect(x, y, w, h);
ctx.fillRect(x, y, w, h);
ctx.clearRect(x, y, w, h);
2. Path 메서드
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.stroke();
3. 원/원호 메서드
arc(x, y, r, 시작각도, 종료각도, 그리는 방향)
- x, y : 원/원호의 중심표
- r : 반지금
- 시작각도, 종료각도 : radian단위 사용 (각도 * Math.PI/180), 3시를 기점으로 시계방향으로 +됨
- 그리는 방향 : false(default) - 시계 방향 , true - 반시계 방향
반응형
'D.evelop > MarkUp' 카테고리의 다른 글
| [XAML] Label 컨트롤 (0) | 2023.12.14 |
|---|---|
| [HTML]오디오 재생 시 재생 중인 다른 오디오 정지 (HTML Audio DOM) (0) | 2023.12.01 |
| [HTML] redirect <meta http-equiv="refresh"/>로 해결한 사례 (0) | 2022.06.15 |
| [HTML] a태그 link와 onclick을 통한 링크 이동 (with C#) (0) | 2022.06.15 |
| video태그 - 자동 재생 autoplay에 대한 방법과 생각 (3) | 2022.03.15 |
댓글