Skeleton의 세상

chrome 기준으로 작성되었습니다. function saveFile(Name, content) { var blob = new Blob([content], { type: 'text/plain' }); objURL = window.URL.createObjectURL(blob); // 이전에 생성된 메모리 해제 if (window.__Xr_objURL_forCreatingFile__) { window.URL.revokeObjectURL(window.__Xr_objURL_forCreatingFile__); } window.__Xr_objURL_forCreatingFile__ = objURL; var test = document.createElement('test'); test.download = fileNam..

먼저 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); // 안이 채워진 사각형을..

* Node.js 를 설치해주세요! https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org REPL이 무엇일까요? Read Eval Print Loop의 약자로써 사용자가 입력한 결과를 바로 반환하는 기능입니다. $ node 를 명령프롬프트 cmd에 위 처럼 입력해 줍니다. 일반적으로 쓰듯이 1+3 을 쳐서 엔터를 누르면 4라는 값이 나옵니다. var repl = 'hi' 를 입력해준다면 console.log(repl); 을 치면 결과로 hi 라는 값이 나오게 될겁니다. ctrl + c 를 누르면 루프를 종료합니다. 간단히 쓰는..