canvas 관련 중요 개념들 정리
html Part
canvas 만들기
<canvas id = "canvas"></canvas>추가) html 간편하게 element 만드는 법
ex)
div.controls_btns>button#jsMode+button#jsSave
라고 입력 하면,
<div class = "controls_btns">
<button id = "jsMode"><button>
<button id = "jsSave"><button>
</div>
값이 출력된다.css Part
flex
하나의 flex item이 자신의 container가 차지하는 공간에 맞추기 위해 크기를 줄이거나 키우는 방법을 설정하는 속성
ex)
display : flex;
flex-direction : column;@import
css 내에서 다른 css 코드도 가져오고 싶을 때
@import "reset.css";
@import url("bluish.css") speech;url 주소 뒤의 speech는 list-of-media-queries를 나타낸다.
box-shadow
box의 그림자를 그려준다.
box-shadow : offsetX(수평거리), offsetY(수직거리), blur radius, spread radius, color
- blur radius : 값이 클수록 테두리값이 흐려진다.
- spread radius : 값이 클수록 그림자가 더 커지고 확산된다.
box-shadow : 0 4px 6px rgba(50, 50, 93, 0.11);border-radius
테두리를 둥글게 만든다.
만약 원형을 만들고 싶다면, width값의 절반을 주면 된다.
ex)
width : 50px;
height : 50px;
border-radius : 25px;:active
사용자가 활성화한 요소(버튼 등)를 나타낸다.
ex)
.controls_btns button:active{
scale(0.98);}위의 코드를 통해 button이 활성화(클릭)가 될때 scale(0.98)이 실행된다.
Range
input의 입력 요소 중 하나이다.
값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의한다.
<input type = "range" min = "0.1" max = "5" value = "2.5" step = "0.1">js Part
offsetX, offsetY
canvas 내의 좌표값을 구할 수 있다.
콘솔 내에서도 확인할 수 있다.
context
canvas는 context라는 element를 갖고 있다.
context를 통하여 픽셀을 다룰 수 있다.
아래의 코드를 이용하여 context를 불러올 수 있다.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');Path
Path : 선, 라인. path로 시작하며 이는 움직일 수도 있고 색을 칠할 수 도 있다.
strokeStyle
색상, 스타일을 라인에 사용할 수 있다.
ex)
ctx.strokeStyle = "white";lineWidth
라인의 두께를 설정한다.
ex)
ctx.strokeStyle = 2.5;beginPath()
path를 시작한다(생성한다). 즉 경로를 만든다.
moveTo()
path의 시작점을 특정 (x,y) 좌표로 옮긴다.
lineTo()
path의 마지막 점에서부터 직선이 만들어지며 연결이 된다.
stroke()
현재의 stroke style로 현재의 sub-path 에 획을 긋는다.
ex)
let painting = false;
function onMouseMove(event){
const x = event.offsetX;
const y = event.offsetY;
if(!painting){
ctx.beginPath();
ctx.moveTo(x,y)}
else{
ctx.lineTo(x,y);
ctx.stroke();}fillRect()
width와 height에 의해 결정된 사이즈로 (x,y)위치에 색칠된 사각형을 그린다.
fill.Rect(x, y, width, height)
ex)
ctx.fillRext(0, 0, 700, 700);fillStyle
해당범위의 색을 칠해준다.
ctx.fillStyle = "black";Array.from()
object 로부터 array를 만든다.
ex) object로부터 array를 만든 후 각각의 item에 event 적용하기
const color = document.getElementbyID("jsColor");
Array.from(color)
Array.from(color).forEach((color)=> color.addEventListener("click", handleColorClick)
toDataURL()
(기본적으로 PNG로 설정된) type parameter에 의해 지정된 포맷의 이미지표현을 포함한 data URL을 반환한다.
ex)
canvas.toDataURL()ex) 위에서 반환된 url을 이용하여 저장 버튼 이미지 링크 만들어주기
function handleSaveClick(){
const image = canvas.toDataURL();
const link = document.createElement("a");
link.href = image;
link.download = "jsCOLOR";
link.click();}
btn.addEventListener("click", handleSaveClick);- download : a tag의 attribute이다. link 클릭 시 link로 가는 대신 다운로드하라고 지시하는 것.
- link.href = "url 주소";
link.download = "해당사이트의 이름";
주의사항)
- canvas element는 두가지 사이즈를 가지고 있어야한다.
-> css size(화면에 보이는 크기)/pixel manipulating size
때문에 js 내에도 canvas 크기를 직접 적어주어야한다!
canvas.width = 700;
canvas.height = 700;- canvas의 초기값 설정해주기 => 사용자가 이미지를 저장할 때를 고려해서
ctx.fillStyle = "white";
ctx.fillRect(0,0,700,700);- 오른쪽 커서 기능 작동 못하게 하는 법 => contextmenu event
(이미지 저장을 막기 위해)
function(event){
event.preventDefault();}
canvas.addEventListener("contextmenu", handleCM);