# canvas

70개의 포스트
post-thumbnail

리액트로 애니메이션 띄우기 (feat. Canvas & RequestAnimationFrame)

리액트, 캔버스로 귀여운 마자용 이동 애니메이션을 구현해봅시다!

3일 전
·
1개의 댓글
post-thumbnail

canvas -바닐라JS 그림판 만들기 nomad coder

ex)하나의 flex item이 자신의 container가 차지하는 공간에 맞추기 위해 크기를 줄이거나 키우는 방법을 설정하는 속성ex)css 내에서 다른 css 코드도 가져오고 싶을 때url 주소 뒤의 speech는 list-of-media-queries를 나타낸다.

2021년 10월 11일
·
0개의 댓글
post-thumbnail

Instagram 새 스토리 animation

캔버스를 이용해 instagram 새 스토리에 animation을 만들어 봅시다.

2021년 10월 9일
·
4개의 댓글
post-thumbnail

리액트 canvas 사용하기

파이널 프로젝트때 사용할 canvas 라이브러리 공부한 내용 정리입니다 fabric 받기 fabric은 canvas 위 그림을 객체로 관리하는 라이브러리입니다 리액트 상에서 사용법은 다음과 같습니다 canvas id 설정 fabric을 저장하고 액세스할 상태 변수

2021년 9월 10일
·
0개의 댓글
post-thumbnail

[1일1js] 그래픽 그리기#5

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphicsARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 AR

2021년 9월 8일
·
0개의 댓글
post-thumbnail

[1일1js] 그래픽 그리기#4

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-sidewebAPIs/Drawinggraphics#loopsand_animations 루프 및 애니메이션 루프 생성 overflow: hidde

2021년 9월 7일
·
0개의 댓글
post-thumbnail

[1일1js] 그래픽 그리기#2

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics예를 들어 를 사용하여 반투명 색상을 지정하여 반투명 그래픽을 그릴 수 있습니다 rgba(

2021년 8월 26일
·
0개의 댓글
post-thumbnail

[1일1js] 그래픽 그리기#1

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-sidewebAPIs/Drawing_graphics 그래픽 그리기 브라우저에는 SVG (Scalable Vector Graphics ) 언어에서 HT

2021년 8월 25일
·
0개의 댓글

손수 그린듯한 디자인의 컴포넌트

hand-drawn javascript... 테스트 진행중https://stackoverflow.com/questions/18685156/handdrawn-circle-simulation-in-html-5-canvashttps://stackoverfl

2021년 8월 17일
·
0개의 댓글

2주차 돌아보기 (Devlog 12일차)

Final Project 2주차 주말을 맞이하게 되었습니다. 이제 Final 도 2주 후면 마무리된다고 생각하니 진짜 시간이 빨리 흐르는 느낌입니다.진행중인 프로젝트는 프론트엔드의 비중이 높은 편입니다. 아무래도 서버는 클라이언트와 기능 구현을 함께 하면 되지만, 클라

2021년 8월 13일
·
0개의 댓글

Canvas

`` canvas는 엘리먼트는 고정 크기의 드로잉 영역을 생성하고, (처음 너비는 300 픽셀이고 높이는 150 픽셀) 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 된다. 직사각형 그리기 fillRect

2021년 7월 27일
·
0개의 댓글
post-thumbnail

[1일1js] HTMLCanvasElement.getContext()

https://developer.mozilla.org/ko/docs/Web/API/HTMLCanvasElement/getContext HTMLCanvasElement.getContext() 동일한 캔버스 엘리먼트에서 나중에 이 메소드를 호출하면 동일한 context

2021년 7월 26일
·
0개의 댓글
post-thumbnail

Canvas - 공 오른쪽으로 이동시키기

requestAnimationFrame 에 대한 이해가 부족한 상태에서 쓰는 글입니다.

2021년 7월 13일
·
0개의 댓글
post-thumbnail

[K-MOOC] 예술가와 디자이너를 위한 아트 코딩 수강후기

K-MOOC(http://www.kmooc.kr/) 예술가와 디자이너를 위한 아트 코딩 강의 수강후기. 해당 강의의 소개, 추천, 강의 내용, 생각 등 수강 후기에 대한 포스팅입니다.해당 강의 수강을 생각하신다면 한번 읽어보시면 큰 도움이 되실 겁니다! ㅎ"J

2021년 6월 14일
·
0개의 댓글
post-thumbnail

[K-MOOC] 예술가와 디자이너를 위한 아트 코딩 기말고사 대체과제

K-MOOC(http://www.kmooc.kr/)에서 예술가와 디자이너를 위한 아트 코딩를 수강했습니다.마지막 기말고사 과제를 완성 후 이렇게 포스팅으로 남깁니다.실력과 시간이 부족해 퀄리티는 너무 아쉽지만 저만의 표현력을 중심으로 재밌게 봐주시면 감사하겠습

2021년 6월 13일
·
0개의 댓글
post-thumbnail

[HTML5 Canvas] 06 캔버스 트랜스폼

크기를 바꾸거나 위치를 바꾸거나 찌그러뜨리거나 회전하거나 등등상태 저장과 복원공식문서 canvas transformation컨텍스트 객체 메소드들임!fillStyle 색상 변환물감이 묻어 있다가 바꿔주는 것.save() 캔버스의 모든 상태 저장.restore() 가장

2021년 6월 11일
·
0개의 댓글
post-thumbnail

[HTML5 Canvas] 05 캔버스 비디오

HTML5 Video 태그 HTML5에서 비디오태그가 추가되었다. 기본적으로는 태그 안에 src 속성으로 비디오 주소를 작성해주면 비디오가 출력되는 것을 확인할 수 있다. autoplay, muted를 비롯해 다양한 옵션이 있는데, 이는 공식문서에서 확인하는 것으로.

2021년 6월 9일
·
0개의 댓글
post-thumbnail

UI 디자이너를 위한 Unity3D (2) - Canvas

Canvas는 Canvas 컴포넌트를 가지고 있는 게임 오브젝트로 UI를 카메라에 렌더링하기 위한 것이다. UI를 렌더링하기 위해서는 반드시 Scene 내에 한 개 이상 존재해야 한다. 모든 UI는 반드시 Scene 내에 존재하는 어떤 Canvas 하위의 Child여야

2021년 6월 6일
·
1개의 댓글
post-thumbnail

[HTML5 Canvas] 04 캔버스 이미지

캔버스를 사용할 때 많은 데이터를 시각적으로 막 표현해주는 작업이 아니라비주얼 표현할 때는 도형 에이피아이 쓰는 게 아니라 일반적으로 걍 이미지 쓰는 경우가 많다.두 가지 방법으로 이미지 만들기 가능외부데이터라는 얘기는 로딩될 시간이 필요하다는 것임캔버스에 그리려면 일

2021년 6월 4일
·
0개의 댓글
post-thumbnail

[HTML5 Canvas] 03 캔버스 애니메이션

requestAnimationFrame 애니메이션을 공부할 때 수도 없이 보아왔던 requestAnimationFrame MDN을 참고하면! > window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트

2021년 5월 30일
·
0개의 댓글