Skeleton의 세상

먼저 HTML에 태그 몇가지를 적어줍니다. 클릭후 확인을 할 수 있어야 하니까요? 아래는 자바스크립트 코드입니다. function fileOpen() { var input = document.createElement("input"); input.type = "file"; input.accept = "text/plain"; input.onchange = function (event) { processFile(event.target.files[0]); // 열린 파일 }; input.click(); } function processFile(file) { var reader = new FileReader(); reader.onload = function () { console.log(reader.result)..

비구조화 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 [...test] = [1, 2, 3, 4, 5]; 위와 같은 식이있다고 가정해봅시다. 왼쪽은 변수명, 오른쪽은 할당해주는 값입니다. console.log(test) 를 한번 적어봅시다. 결과값은 [1, 2, 3, 4, 5] 가 나오게 될것입니다. 당연한거죠? const test = [1, 2, 3, 4, 5]; 이렇게 적어도 같은 결과일겁니다. 자 그럼 좀 더 짤라볼까요? [a, b, ...test] = [1, 2, 3, 4, 5]; console.log(a); console.log(b); console.log(test); 자 다음과 같이 적는다면 콘솔에 적히는 결과값은 과연 어떻게 나올까요? 결..

var array = [0, 1, 2, 3, 4, 5]; array.splice(2, 1); //결과값 [0, 1, 3, 4, 5] splice(인덱스, 갯수, 추가할 요소명)

drawImage(dx, dy) 이미지 크기 그대로 좌표(왼쪽위 기준)에 그림 drawImage(dx, dy, dw, dh) 이미지 크기를 조정하고 좌표(왼쪽위)에 그림 drawImage(sx, sy, sw, sh, dx, dy, dw, dh) 이미지를 crop(자름)해서 좌표로 가져옴 용어 설명 s slice, d draw

lineCap 선 끝 부분 스타일 속성값 : butt(default), round, square lineJoin 선이 꺽이는 부분 스타일 속성값 : miter, round, bevel(default) lineWidth 선 두께 속성값: 1(default) strokeStyle 선 색 속성값: #000000(default)[검은색]

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = '색상'; // stroke이 들어가는 색상 ctx.lineWidth = 3; // 선 굵기 ctx.fillStyle = '색상'; // fill이 들어가는 색상 var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); //그라데이션 적용 grd.addColorStop(0, '#FF0000'); // 그라데이션 시작색 빨강 grd.addColorStop(1, '#0000FF'); // 그라데이션 2번째 색 (여기선 끝색) 파랑

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.quadraticCurveTo(px, py, x, y); //하나의 점을 향해 굽는 곡선 그리기 ctx.bezierCurveTo(p1x, p1y, p2x, p2y, x, y); // 2개의 점을 가진 베지어 곡선 그리기 ctx.arcTo(x1, y1, x2, y2, radius); // 두 점 사이의 반지름 만큼의 원을 그림 ctx.arc(x, y, radius, startAngle, endAngle, antiClockwise); // 좌표를 중심으로 반지름 크기의 시작점부터 끝나는 점까지 잇는 원을 그림 // antiClockwise 시계방향 반시계방향

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(r,g,b)"; // fill이 들어가는 색상을 바꿀 수 있습니다. ctx.beginPath(); // 선을 그릴때 시작하는 함수 ctx.moveTo(x, y); // 선의 시작점 ctx.lineTo(x, y); // 선의 끝점 ctx.stroke(); // 현재까지 설정한 그림들을 그리는 함수 ctx.closePath(); // 선을 그릴때 닫아서 시작점과 잇는 함수 ctx.strokeRect(x, y, w, h); // 선으로만 사각형을 그립니다 ctx.fillRect(x, y, w, h); // 안이 채워진 사각형을..

canvas를 사용하는 방법에 대하여 알아보겠습니다. 위와 같은 canvas를 하나 만들어 주었습니다. 스타일은 정말 간단하게 이렇게 적어두겠습니다. 그럼 검은선의 100x100 의 사각형 canvas가 만들어 집니다. 이안에 사각형을 만들어보겠습니다. var meCanvas = document.getElementById('myCanvas'); if (meCanvas.getContext) { //여기서 canvas를 제대로 가져왔는지를 판별합니다. var ctx = meCanvas.getContext('2d'); ctx.fillRect (10, 10, 50, 50); // 좌표 x: 100, 좌표 y: 100 인곳에서부터 오른쪽으로 넓이가 50인 사각형을 만듭니다. // 여기서 사각형은 안이 색으로 채워..

Canvas태그에 관하여 알아보자. canvas 태그는 간단히 말해 그림판 같은거라 생각하면 편합니다. 점과 점사이를 연결하는 선이나 사각형 여러 도형을 그릴때 편하게 그릴 수 있습니다. canvas의 css가 아닌 width와 height는 픽셀 단위입니다. 예를들어 canvas { width: 500px; height: 500px; } css를 이렇게 작성해 주었다고 가정합니다. 그럼 넓이가 500픽셀 높이가 500픽셀인 canvas가 생성됩니다. 그후 이런 캔버스를 만들었다고 가정한다면 홈페이지에서의 화면에서는 500x500으로 고정되어 보이지만 canvas태그 내부에서는 넓이1000px 높이1000px을 사용가능합니다. 이해가 잘 안되신다면 실전을 통하여 알아봐야겠죠? 여기서는 canvas가 어떤..