728x90 반응형 자바스크립트/Javascript14 canvas의 scale에 원리! *광고 클릭은 제게 큰 힘이됩니다! 업무를 함에 있어 canvas를 많이 이용하는데 resize를 위해 scale조정을 많이 하는것을보고 정리를 해야할거같아 글을쓴다. 1.CanvasRenderingContext2D.scale 기본적으로 캔버스의 한 단위는 1픽셀이다. scale은 배율을 조정하는것으로써 0.5 배율이며 단위크기는 0.5픽셀이되면 스케일링이 2배이면 한 다위가 2픽셀이되도록 단위크기가 증가한다. .scale(x,y) x :수평 방향의 배율입니다. 음수 값은 수직 축에서 픽셀을 뒤집습니다. 값은 1수평 확장이되지 않습니다. y :수직 방향의 배율입니다. 음수 값은 가로 축에서 픽셀을 뒤집습니다. 값은 1수직 확장이되지 않습니다. 예를들어보자 class App{ constructor(){ t.. 2021. 3. 18. resize된 canvas위에 대한 mouse좌표 스케일링 let rect = this.canvas.getBoundingClientRect(); let scaleX = this.canvas.width/rect.width; let scaleY = this.canvas.height/rect.height; //resize된 캔버스 마우스 pos 재정렬 this.mousePos.x = (e.clientX - rect.left)*scaleX this.mousePos.y = (e.clientY - rect.top)*scaleY 2021. 3. 18. XMLHttpRequest를 통해 canvas의 그린 이미지를 서버에 던지기 //canvas에 그려진 이미지를 base64로 변환 var dataurl = this.canvas.toDataURL("image/png"); var xhr = new XMLHttpRequest(); var data = { searchimage: dataurl }; xhr.crossOrigin = "Anonymous"; xhr.onload = function() { if (xhr.status === 200 || xhr.status === 201) { console.log(xhr.responseText); } else { console.error(xhr.responseText); } }; xhr.open('POST', '서버IP'); xhr.setRequestHeader('Content-Type', 'ap.. 2021. 2. 26. What is Webpack? 웹팩이란 무엇일까? What is WebPack? WebPack 은 브라우저에서 자바스크립트 파일들을 묶어서(번들링) 사용하기 위함이며, 어떠한 자원(js,css,png,jpg등)이나 자산 등을 전송,구축 패키징이 가능하게 만드는 도구이다. 2000년대 초 쯤만하더라도 정적인 페이지를 운영하는 형식이라 페이지가 변화할때마다 새로운 HTMl을 요청하여 화면을 그렸다. 그 당시엔 자바스크립트는 DOM을 조작하는 간단한 역할만 했기때문에 HTML에 script태그를 넣는것을 충분햇다. 요즘 SPA(single page application)은 하나의 HTML에 수백개의 자바스크립트 파일을 포함하기에 비중이 어마어마하게 커졌다. 자바스크립트 파일이 많아지면서 기존에 생성된 전역변수가 덮어지는 실수가 생기기도 하고 많은 양의 스크립.. 2021. 1. 31. javasciript closure(클로저)란?? 클로저를 이해하려면 자바스크립트가 어떤 변수의 유효범위를 지정하는지 (Lexical scoping)을 먼저 이해 해야한다. 1.Lexical scoping(어휘적 범위 지정) 아래 코드를 보자 function init() { var name = "Chrome"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); init()함수는 지역변수 name과 displayName()을 생성한다. displayName()은 init()안에 정의된 내부 함수이며 init()함수 본문에서만 사용할.. 2021. 1. 7. explorer11 javascript replace를 replaceall 처럼 활용하기 *글을 읽기전 광고 클릭은 제게 큰 힘이됩니다! 크롬에서는 replaceall을 사용하여 문자열에 공백을 전부 치환할수있다. 하지만 역시 문제는 실제 SI사업에서 explorer 11을 사용하는곳이 많아 explorer 11에서는 replaceall이 사용이 불가능하다. 그렇다면 어떻게 replaceall처럼 사용할수있을까? 바로 javascript 에서 존재하는 replace로 가능하며 replace(/"치환문자열"/gi,"") 정규식을 통하여 모든 문자열을 바꾸는식으로하면된다 정규식 gi설명은 g: 발생할 모든 pattern에 대한 전역 검색 i: 대/소문자 구분안함 m: 여러줄 검색 이런식으로 사용한다. 상급 개발자로 가기 위해선 정규식을 잘사용하는것도 한가지 방법이다. 2021. 1. 3. 이전 1 2 3 다음 728x90 반응형
