프로젝트27 3. Canvas 이미지 추출 ※outputCanvasImage 함수 추가 - 캔버스 이미지 추출 ※outputImageSrc / setOutputImageSrc 추가 - 이미지 src 변수 / 함수 캔버스로 그린 그림을 이미지로 추출 (outputCanvas 함수) -toDataURL() : 캔버스에 그린 그림을 문자열 형태로 변환. page - import React, { useEffect, useRef, useState } from "react"; function Canvas() { const canvasRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [lastX, setLastX] = useState(0); const [lastY, set.. 2024. 4. 11. 2. 선 그리기 ※drawing 함수 추가 - 선 생성 ※drawingCanvas 함수 추가 - 선 그리기 ※stopDrawing 함수 추가 - 선 그리기 멈추기 ※canvasOut 함수 추가 - 캔버스 밖으로 나갔을 시 ※css 파일 삭제 - css를 적용하니 마우스 커서 위치 지정에 오류가 생김 마우스로 캔버스에 선을 그림 -getBoundingClientRect() : 캔버스 내의 좌표를 가져오는 매서드 -e.clientX : 마우스 이벤트가 발생한 X 좌표 위치 (브라우저 창 기준) -e.clientY : 마우스 이벤트가 발생한 Y 좌표 위치 (브라우저 창 기준) -rect.left : canvas 요소의 왼쪽 경계가 브라우저 창의 왼쪽 경계에서 얼마나 떨어져 있는지 -rect.top : canvas 요소의 위쪽.. 2024. 4. 11. 1. Canvas canvas : web에서 마우스로 글, 그림을 그릴수 있게 해주는 태그 -canvas는 html 태그를 이용하므로 useRef로 DOM에 접근 -getContext() : 캔버스의 드로잉 컨텍스트를 받아오는 메서드 page - import React, { useEffect, useRef } from "react"; import "../../css/canvas.css"; function Canvas() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); //2d 형식의 드로잉 컨텍스트를 받아옴 }, []); return ( ); } exp.. 2024. 4. 11. 이전 1 ··· 4 5 6 7 다음
