[canvas] 움직이는 공 drawing loop 드로잉 루프 정의하기 매 프레임마다 캔버스에 그리는것을 지속적으로 갱신하기 위해서는, 계속해서 그리는 것을 반복하게 만들어주는 함수가 필요합니다. 이 함수는 매 프레임마다 위치를 바꿔주기 위한 몇가지 변수들을 포함합니다. JavaScript 타이밍 함수인 setInterval()나 requestAnimationFrame()를 이용하면 함수를 몇번이고 계속 반복해서 실행할 수 있습니다. 현재 여러분의 HTML파일 안에 있는 JavaScript중에 처음 두 줄만 제외하고 나머지는 모두 지워주세요. 지운 후에는 아래에 있는 코드를 추가해주세요. draw()함수는 setInterval를 통해서 10밀리초마다 실행됩니다. function draw() { // drawing code } setInterval(dra.. IT/캔버스 6년 전
[canvas] 캔버스 기초 canvas foundation (원그리기, 사각형그리기) 캔버스 구조 width와 height를 나타내는 속성을 가지고 있으며, 함수로는 toDataURL, toBlob, getContext 함수를 가지고 있다. 여기서 가장 기본적으로 사용해야하는 것은 바로 getContext 함수로 자바스크립트에서 canvas의 context를 가져와서 그 context에 그림을 그리게 되는 것이다. 먼저 html태그에서 canvas태그를 넣어보자. 그래픽을 렌더링하기 위해서는 JavaScript로 참조 할 수 있게 아래의 소스를 넣어줘야 합니다. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); 엘리먼트에 대한 참조를 canvas 변수에 저장하였습니다. 그러고 나서는 캔버.. IT/캔버스 6년 전
SVG Path Animation SVG로 애니메이션 로고 만들기 1. 일러스트레이터로 SVG파일 만들기 2. SVG파일을 웹브라우저로 옮겨서 소스보기 샘플소스 : https://jsfiddle.net/SUMIKIM/oqug1jft/ IT/캔버스 6년 전
