Canvas 3

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - or, and 연산자

프롬프트 창에 나이를 입력하면 콘솔창에서 확인할 수 있음. const age = parseInt(prompt("your age")); //or 연산자 true || true === true false || true === true false || false === false //and 연산자 true && true === true true && false === false false && false === false // console.log(isNaN(age)); if(isNaN(age) || age < 0){ // age가 숫자가 아니거나 0이하일 때 console.log("0이상의 숫자를 입력해주세요"); } else if(age < 18) { // age가 18 미만일 떄 console.log("..

노마드 코더 - 바닐라 JS로 그림 앱 만들기- 이미지 파일버튼 추가

파일 선택 버튼이 추가 되었음. ​ //html accept ="image/*" 파일은 이미지파일로 이미지 파일형식은 모든 파일 Fill Destroy Erase //js const fileInput = document.getElementById("file"); //file function onFileChange(e) { const file = e.target.files[0]; const url = URL.createObjectURL(file); //url 가져오기 const image = new Image(); image.src = url;// html 코드와 동일 image.onload = function() { ctx.drawImage(image, 0, 0, canvasWidth, canvasHei..

노마드 코더 - 바닐라 JS로 그림 앱 만들기- 선그리기

누추한 조개껍데기 만드는방법 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; ctx.lineWidth = 2; const colors = [ "#FFAD9E", "#D7AFFF", "#B3D89C", "#9FE2BF", "#F0F0F0", "#A2B9F2", "#E2B1E1", "#B8E080", "#FFD1DC" ] function onclick(event){ console.log(event); ctx.beginPath(); ctx.moveTo(0,0); const color = colors[Math.floor(Math.ran..