# canvas
[2022.05.17] Canvas API - 간이 그림판 만들기
먼저, 캔버스 위에서 원하는 위치에 도형이 그려지는 것을 만들어 보자.테스트를 위해 캔버스에 클릭 이벤트 리스너와 클릭 이벤트 리스너에 들어갈 콜백 함수를 작성했다.이렇게만 작성하면 캔버스 위에서 아무 곳이나 클릭하면 캔버스 기준 x좌표 100, y좌표 100위치에 반
[2022.05.15] Canvas API - 캔버스에 이미지 사용하는 방법
자바스크립트에서 이미지 객체를 만든 후, 캔버스에서 불러오면 된다.두 가지 방법 중 1개를 사용하면 메모리 상에 이미지 객체가 만들어진다.이제 HTML에서 img 요소를 작성하는 것처럼 자바스크립트에서 src를 넣어서 이미지의 경로를 작성해주면 된다.여기서 알아야 할
[2022.05.14] Canvas API - 애니메이션 멈추는 방법
이전에 공부했던 캔버스 강좌를 이어서 1분 코딩님의 라이브강좌 영상을 기준으로 작성하였다.오늘은 간단히 애니메이션을 멈추는 방법에 대해 공부해보았다.지난번에 작성한 캔버스 관련 포스트Canvas API 개념 & 기본 사용방법Canvas API 선과 원 그리기Canvas
[2022.05.12] Canvas API - 캔버스 애니메이션 적용하기
지난번에 작성한 캔버스 관련 포스트 Canvas API 개념 & 기본 사용방법 Canvas API 선과 원 그리기 목차 캔버스에서 애니메이션 구현하기 (requestAnimationFrame) 원이 수평으로 움직이도록 만들기 setInterval 사용해보기 se
[2022.05.11] Canvas API - 선과 원 그리기
1분코딩님의 영상을 보고 참고하여 정리하였다.이전에 Canvas API에 대한 개념과 캔버스에 사각형을 그리는 등의 기본 사용 방법을 살펴보았다.오늘도 이어서 canvas API 사용에 대해 살펴보고자 한다.선 그리기원 그리기좌측 상단 0, 0으로부터 시작해서 x좌표와
[2022.05.10] Canvas API 개념 & 기본사용방법
1분코딩님의 영상을 보고 참고하여 정리하였다.1\. canvas API 개념2\. 브라우저에서 canvas 지원여부 확인3\. canvas 사이즈 설정하기 (&고해상도 처리 방법)4\. canvas 사용 방법 사각형 그리기 fillRect() 사각형 색상 넣기 fill
랜덤 함수로 만드는 '제너레이티브 아트' 가이드
아티스트 Dmitri Cherniak 가 2,100ETH(한화 약 90억원)에 판매한 <Ringers> 작품처럼, 제너레이티브 아트를 직접 만들어봅시다.
Hello DOM
DOM은 Document Object Model의 약자이다.우리는 함께 DOM에 대한 튼튼한 기본을 만들어 가보도록 하자.사용자와 상호 작용(interaction)사용자는 상호 작용 대상의 총칭이다.동적으로 콘텐츠를 표현이를 위한 기반 기술을 제공한다.예를 들어 onC
<canvas>태그를 이용한 리사이징(3)
다양한 드로잉 방법 [링크: Drawing shapes with canvas ]('https://developer.mozilla.org/en-US/docs/Web/API/CanvasAPI/Tutorial/Drawingshapes')링크: codepen
<canvas>태그를 이용한 리사이징(2)
링크: Basic usage of canvas<body>의 page load event시 draw()가 실행한다.<canvas>를 선택하고 렌더링 컨텍스트에 접근하기 위해 getContext('2d')를 실행한다.fillStyle로 그려질 이미지의 스타일(색
<canvas>태그를 이용한 리사이징(1)
링크: Basic usage of canvas<img>엘리먼트와 비슷하나 src, alt가 없으며 width, height 요소를 가지고 있는것이 특징이다. 기본값으로 300 width, 150px height를 가지며 DOM properties로 설정할 수 있다
.png)
canvas 데이터 이미지(png)로 변환 후 axios POST 요청보내기
canvas 데이터 이미지(png)로 변환 후 axios POST 요청보내는 로직을 구현해보자!
React canvas 드래그로 사각형 그리기
canvas를 이용하여 드래그로 사각형 그리는 component를 구현하는 방법과 구현하며 발생한 문제를 해결한 방법을 알려주고자 한다.우선 canvas를 이용하기 위한 기본적인 설정을 한다.useRef를 이용해 canvas 엘리먼트에 접근한다.canvasRef를 ca
Canvas
단순한 도형, 데이터 시각화, 애니메이션, 웹 게임 등의 콘텐츠를 만들 수 있는 방법, canvas를 알아보자html의 <canvas>태그와 javaScript를 사용하여 다양한 그래픽 요소를 만들 수 있고 나아가 애니메이션, 웹 게임같은 콘텐츠를 만들 수 있는
Canvas 블로깅
<canvas> 태그와 JS를 통해 도형, 데이터 시각화, 애니메이션, 웹 게임 등 다양한 콘텐츠를 만들 수 있습니다. 최근에 많아 핫한 게임 Vampire Survivors 또한 HTML, CSS, JS를 통해 만들었습니다.PixiJS와 같은 2D 게임 엔진을
공 튀기기 🏀🏐
공을 그릴때는 항상 중심점을 기준으로 공에 x , y 값을 잡는다. => 중심점이 공의 실제 위치 (회색 점)반지름이 굉장히 중요!반지름을 x, y 값에다가 + , - 해줘야 실제로 공이 브라우저에 닿았는지 알 수 있음.그래서 공에 x , y값을 비교하는 것이 아니
Jetpack Compose Canvas 톺아보기
Jetpack Compose 를 사용하게 되면서 Canvas 를 쉽게 다룰 수 있게 되었습니다 👏
