[HTML/canvas] Basic animations(2/2)

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 파노라마 * ******************************** * 파노라마 * ********************************* */ var img = new Image(); // 변수 img.src = "images/shinee_concert.jpg"; var CanvasXSize; var CanvasYSize; var speed = 1; // 애니메이션 업데이트 속도 var scale = 0.5; var y = 0; // 수직 옵셋 var dx = 0.75; // 캔버스에서의 이동량(음수 왼쪽, 양수 오른쪽) var imgW; var imgH; var x = 0; // 이미지 위치 var clearX; var clearY;..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 26.
• textsms

[HTML/canvas] 변형 (transformations)

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 function drawTrans() { var ctx = document.getElementById("transCanvas").getContext("2d"); // save(상태저장) & restore(가장 최근 canvas 상태 복원) /* * 이게 개념이 헷갈릴 수 있는데 * 저장공간 스택에 save로 상태를 push하고 * restore로 pop해서 복원하는 것 * (restore를 실행취소로 잘못 생각했었음) */ ctx.fillRect(0,0,150,150); ctx.save(); // 기본 상태 저장(push1) // 설정 변경 ctx.fillStyle = "#09F"; ctx.fillRect(15,15,60,120); ctx.fil..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 22.
• textsms