티스토리 뷰

WEB 웹/JAVASCRIPT

Fun with HTML5 Canvas (javascript30 - 8)

KIMSG 2017. 11. 21. 11:00



재미있는 캔버스 사용하기.

하이브리드 어플을 만들때 사인을 받기 위해서 canvas를 사용할 수 있다고 배웠다.

실제로 사인도 해보고 canvas로 사인하여 그 화면 자체를 이미지로 저장하는 것도 했었다.

그런데 이분은 알록달록하게 canvas를 활용하시네... 대단하다.


canvas는 처음에는 비어있다. 그래서 getContext(‘2d’)를 사용해서 선언을 해야 한다. 이때, 2d는 그래픽이다.
1
2
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');

strokeStyle : 도형의 윤곽선 색을 설정합니다.

1
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;

이부분이 좀 의외였다.

아래는 MDN에서 나온 설명을 토대로 한다. 
MDN에서는 위와 같은 표기법을 허용하지 않는다고 나와있고 아해의 4가지 표기법을 사용하라고 나와있다.

색의 올바른 값은 CSS3 사양에 나오는 <color> 값입니다. 아래에 나오는 색은 모두 한가지 색을 다르게 표현한 것입니다.
// fillStyle에 적용되는 색은 모두 '오렌지'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

알아둘 것: C현재 게코 엔진에서는 CSS 3 색상 값을 모두 지원하지는 않습니다. 예를 들어  hsl(100%,25%,0) 또는 rgb(0,100%,0)은 허용되지 않습니다. 위 코드에 나온 네 가지 표현을 사용하면 문제는 없습니다.

위의 표기법처럼 바꾸고 실습을 해봐도 역시 색상은 나온다. 다만 색이 탁하고 느낌이 살지 않을 뿐이다.

// start from
ctx.moveTo(lastX, lastY);
// go to
ctx.lineTo(e.offsetX, e.offsetY);

위 내용 모두 주석의 말 그대로 입니다.

beginPath() : 캔버스를 시작할 때 새로운 path를 만들기 위해 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
 
// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
 
// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();


아마도 선을 만들어주는 메소드?


저작자표시 비영리 동일조건

'WEB 웹 > JAVASCRIPT' 카테고리의 다른 글

Hold Shift to Check Multiple Checkboxes (javascript30 - 10)  (0) 2017.11.22
14 Must Know Dev Tools Tricks (javascript30 - 9)  (0) 2017.11.22
Array Cardio 2💪💪(javascript30 - 7)  (0) 2017.11.20
Ajax Type Ahead 👀 (javascript30 - 6)  (0) 2017.11.20
Flex Panels (javascript30 - 5)  (0) 2017.11.20
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
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
글 보관함