<canvas>
태그와 Javascript 사용id
를 작성해주는 것이 좋다.<canvas id="canvas"></canvas>
const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext('2d')
width
, height
속성으로 설정// 500픽셀 * 500픽셀 <canvas id="canvas" width="500" height="500"></canvas> // vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정된다. <canvas id="canvas" width="50vw" height="40vh"></canvas>
// 픽셀 외에 vw, vh 등의 단위도 가능 canvas.width = 50vw; canvas.height = 40vh; // 화면 크기에 맞춰서 설정해줄 수도 있다. canvas.width = window.innerWidth; canvas.height = window.innerHeight;
1) 사각형 칠할 색상 정하기
2) fillRect
메소드 이용해 사각형 그려주기
ctx.fillStyle = 'blue' ctx.fillRext = (10, 10, 100, 50) //순서대로 x좌표, y좌표, 가로길이, 세로길이
1) lineWidth
(선의 굵기), strokeStyle
(선의 색상) 설정하기
2) strokeRect
메소드를 이용해 사각형 그려주기
ctx.lineWidth = 5; ctx.strokeStyle = "black"; ctx.strokeRect(10, 10, 100, 50)
ctx.clearRect( 20, 20, 80, 30)
클릭 이벤트 일어날 때의 캔버스에서의 마우스 위치
= 전체 화면에서의 마우스의 위치 - 전체 화면에서의 캔버스의 위치
전체 화면에서의 마우스의 위치
X좌표 : event.clientX
Y좌표 : event.clientY
전체 화면에서의 캔버스의 위치
X좌표 : ctx.canvas.offsetLeft
혹은 event.offsetX
Y좌표 : ctx.canvas.offsetTop
혹은 event.offsetY
👉🏽 캔버스에서의 클릭 위치
X좌표 :event.clientX
-ctx.canvas.offsetLeft
Y좌표 :event.clientY
-ctx.canvas.offsetTop
canvas.onclick = function (event) { // 캔버스에서의 좌표 변수에 저장 const x = event.clientX - ctx.canvas.offsetLeft const y = event.clientY - ctx.canvas.offsetTop // 클릭할 때마다 사각형 그리기. 클릭한 지점이 사각형의 정중앙 ctx.fillRect(x - 15, y - 15, 30, 30); }
import { useRef } from 'react'; const Canvas = () => { const canvasRef = useRef(null); // 캔버스 가져옴 ... return ( <div> <canvas ref={canvasRef} /> // useRef 사용해 캔버스 요소 지정 </div> ); };
import { useRef, useEffect } from 'react'; // useEffect 가져오기 useEffect(() => { const canvas = canvasRef.current; // 실제 캔버스 canvas.width = window.innerWidth; // 캔버스 크기 지정 canvas.height = 700; ... }, []); // 렌더링 시 한 번만 실행
useEffect(() => { const canvas = canvasRef.current; // 실제 캔버스 canvas.width = window.innerWidth; // 캔버스 크기 지정 canvas.height = 700; // 사각형 1 const context = canvas.getContext('2d'); // 요소 컨텍스트(렌더링 될 대상) 선언 context.fillStyle = '#efd5cb'; context.fillRect(50, 20, 600, 150); // 사각형 2 const context2 = canvas.getContext('2d'); context2.lineWidth = 10; context2.strokeStyle = '#6666e2'; context2.strokeRect(200, 100, 600, 400); }, []);
useEffect(() => { const canvas = canvasRef.current; // 실제 캔버스 canvas.width = window.innerWidth; // 캔버스 크기 지정 canvas.height = 700; // 클릭 시 생기는 사각형 const context3 = canvas.getContext('2d'); canvas.onclick = function (event) { const x = event.clientX - context3.canvas.offsetLeft; const y = event.clientY - context3.canvas.offsetTop; context3.fillStyle = '#4aaf9c'; context3.fillRect(x - 15, y - 15, 30, 30); }; }, []);
import { useRef, useEffect } from 'react'; const Canvas = () => { const canvasRef = useRef(null); // 캔버스 가져옴 useEffect(() => { const canvas = canvasRef.current; // 실제 캔버스 canvas.width = window.innerWidth; // 캔버스 크기 지정 canvas.height = 700; // 사각형 1 const context = canvas.getContext('2d'); // 요소 컨텍스트(렌더링 될 대상) 선언 context.fillStyle = '#efd5cb'; context.fillRect(50, 20, 600, 150); // 사각형 2 const context2 = canvas.getContext('2d'); context2.lineWidth = 10; context2.strokeStyle = '#6666e2'; context2.strokeRect(200, 100, 600, 400); // 클릭 시 생기는 사각형 const context3 = canvas.getContext('2d'); canvas.onclick = function (event) { const x = event.clientX - context3.canvas.offsetLeft; const y = event.clientY - context3.canvas.offsetTop; context3.fillStyle = '#4aaf9c'; context3.fillRect(x - 15, y - 15, 30, 30); }; }, []); return ( <div> <canvas ref={canvasRef} /> </div> ); }; export default Canvas;