나를 제외한 천재들 블로그


- 'Canvas' 태그의 글 목록 -

Canvas

    [JS] 룰렛 구현하기

    [JS] 룰렛 구현하기

    JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다. 코드 See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen. 코드 풀이const $c = document.querySelector("canvas");const ctx = $c.getContext(`2d`);// 룰렛에 들어갈 항목const product = [ "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살",];// 각 항목에 해당하는 색상const colors = [ "#dc0936", "#e6471d", "#f7a416", "#efe61f ", "#60b236", "#209b6c", "#169ed8"..

    [JS] 캔버스(Canvas) 이미지 다운로드

    [JS] 캔버스(Canvas) 이미지 다운로드

    A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다. 예제 코드 See the Pen drawing by hyukson (@hyukson) on CodePen. 코드 // 다운로드할 캔버스 const $canvas = document.querySelector("canvas"); // A DOM 생성 const $link = document.createElement("a"); $link.download = "파일명.png"; $link.href = $canvas.toDataURL("image/png"); // element에 마우스 클릭 $link.click(); document.createElement 메서드..

    [JS] Canvas에서 가운데 정렬 텍스트 그리기

    [JS] Canvas에서 가운데 정렬 텍스트 그리기

    다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 Canvas에 그릴 수 있습니다. 첫 번째 코드 const cw = width / 2; const ch = height / 2; // 그리는 기준점을 글자의 가운데로 ctx.textAlign = "center" ctx.fillStyle = "#000"; ctx.fillText( text, cw, ch ); ctx.fill(); 글자를 그리기 전에 텍스트의 X 시작점을 가운데로 옮기는 속성을 적용시키면 간단하게 중앙 정렬시킬 수 있습니다. 두 번째 코드 const cw = width / 2; const ch = height / 2; // 그릴 텍스트의 넓이 구하기 const textWidth = ctx.measureText(text).width; ct..

    [JS] base64 이미지 용량 줄이기 (File API)

    [JS] base64 이미지 용량 줄이기 (File API)

    코드 // const file = ().files[0] // file type을 가진 input DOM에 files로 파일 데이터를 가져올 수 있습니다. const fr = new FileReader(); fr.onload = (base64) => { const image = new Image(); image.src = base64.target.result; image.onload = (e) => { const $canvas = document.createElement(`canvas`); const ctx = $canvas.getContext(`2d`); $canvas.width = e.target.width; $canvas.height = e.target.height; ctx.drawImage(e.ta..