📈 js 그래픽🎨 Canvas 검색 결과

해당 글 3건

브라우저에 적합한 애니메이션 구동하기 : requestAnimationFrame

딱히 canvas에서만 사용되지는 않는데, canvas에서 애니메이션을 그릴 때 주로 사용되긴 한다. 아래는 MDN에서 가져온 코드인데, timestamp가 찍힐 때마다 progress를 증가시키는 애니메이션이라 가정할 때, 분명 매우 많은 수의 이벤트가 일어날 것이다. 많은 수의 이벤트가 발생하는 경우에 취하는 일반적인 조치에선 (소켓, 리사이징, 폴링 이벤트 같은 경우가 있겠다) 의도에 따라 debounceTime, thrtottlingTime 등을 지정해주면 되는데 애니메이션의 경우 이런 식의 핸들링을 할 경우 '부드러움'이 부족하다. var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); elem..
📈 js 그래픽/🎨 Canvas 4년 전

Canvas 이미지 사용하기

context의 drawImage를 이용하여 캔버스 위에 이미지를 입힐 수 있습니다. (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); s는 source의 약자입니다. 이미지 내부 크기, 위치를 의미합니다. d는 destination이라네요. const canvas = document.querySelector("...
📈 js 그래픽/🎨 Canvas 5년 전

HTML5 Canvas 생성 및 그리기

캔버스 튜토리얼 이 튜토리얼은 canvas 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합�� developer.mozilla.org canvas는 주로 브라우저에서 2D 그래픽에 중점을 두고 있다. 3D 지원을 위한 webGL도 근본은 canvas이다. canvas를 사용하면 조금 더 인터렉티브하고 화려한 웹을 구현할 수 있다. 사용도 그냥 canvas 태그를 쓰면 된다. 맨 처음 생성하면 투명하게 보이니 백그라운드 컬러를 주고 시작하자. - modernizr 체크 (이 브라우저는 캔버스를 지원하는가?) https://modernizr.com/ 특정 기능을 브라우저에서 지원하는 지 체..
📈 js 그래픽/🎨 Canvas 5년 전