일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Node
- 상태관리
- AR
- PHP
- bootstrap
- Three.js
- promise
- vuex
- web
- Component
- vue
- vue-template-compiler
- array
- version mismatch
- EM6
- WebVR
- vuetify
- JavaScript
- WebXR
- VR
- 3d
- A-Frame
- package-lock.json
- javscript
- npx
- CI/CD
- JS
- auth0
- PDO
- aframe
Archives
- Today
- Total
대가는 결과를 만든다
HTML에서 <canvas>란? 본문
반응형
<canvas> element는 웹페이지에서 그래픽을 그릴 대 사용하는 컨테이너이다.
- 선분, 사각형, 원, 문자, 이미지 추가하는 메서드 존재
- 그래픽을 그리기 위해 자바스크립트를 사용해야 함
참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage
예시)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | const canvas = document.getElementById("number"); //id로 canvas element에 접근 const ctx = canvas.getContext("2d"); //2d 그래픽을 그릴 수 있는 메서드를 지닌 HTML5 오브젝트 const x = 32; //원점 x 좌표 const y = 32; //원점 y 좌표 const radius = 30; //반지름 const startAngle = 0; //0도 const endAngle = Math.PI * 2; //360도 ctx.fillStyle = "rgb(0,0,0)"; //채우기 색 설정 ctx.beginPath(); //새로운 경로 생성, 경로 생성 후 그리기 명령들은 경로를 구성하고 만드는데 사용 ctx.arc(x, y, radius, startAngle, endAngle); //x,y위치에 원점을 두고, radius 반지름을 가지고, startAngle에서 시작하여 endAngle에서 끝나며 주어진 방향(옵션 기본값은 시계방향)으로 호 그림 ctx.fill(); //경로의 내부를 채워서 내부가 채워진 도형을 그린다. 열린도형은 자동으로 닫히므로 closePath()호출 필요 X ctx.strokeStyle = "rgb(255,255,255)"; //윤곽선의 색 설정 ctx.lineWidth = 3; //윤곽선의 두께 ctx.beginPath(); //새로운 경로 생성 ctx.arc(x, y, radius, startAngle, endAngle); //원 생성 ctx.stroke(); //윤곽선을 이용하여 형 그림 ctx.fillStyle = "rgb(255,255,255)"; //채우기 색 설정 ctx.font = "32px sans-serif"; //문자 폰트 크기, 글씨체 ctx.textAlign = "center"; //문자 정렬 ctx.textBaseline = "middle"; //베이스 라인 정렬 설정 ctx.fillText("1", x, y); //주어진 x,y 위치에 주어진 "1" 텍스트를 채움, 최대폭 maxwidth 옵션값 | cs |
'개발 > Web관련' 카테고리의 다른 글
babel-polyfil (0) | 2019.04.15 |
---|---|
JWT(JSON Web Token) (0) | 2019.03.25 |
DOM event 종류 Docs 참고 (0) | 2019.01.28 |
bootstrap (0) | 2019.01.23 |
[스터디] Viewport 관련 내용 (0) | 2019.01.02 |
Comments