캔버스

[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) 이미지 다운로드

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에서 가운데 정렬 텍스트 그리기

다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 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..