-
CANVAS 연습13(사각형 이동)게임/HTML 연습 2018. 6. 29. 14:37반응형<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CANVAS 연습13</title></head><body><canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
var ctxW = canvas.width; //캔버스의 폭 가져옴var ctxH = canvas.height; // 캔버스의 높이 가져옴var x = 0; //x좌표에 사용할 변수 선언function animate() {ctx.clearRect(0, 0, ctxW, ctxH); // 캔버스를 깨끗이 지운다(없으면 막대 그래프 증가하는 모습처럼 됨)//빨간색 선 그려짐ctx.fillStyle = "red";ctx.fillRect(x, 50, 50, 50); //사각형 그리기x++;}var animateInterval = setInterval(animate, 30); //animate 함수를 30ms마다 실행
</script></body></html>결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습13_2(클릭한 곳에 사각형 그리기) (0) 2018.06.29 CANVAS 연습13_1(사각형 이동 && 클릭시 멈춤) (0) 2018.06.29 CANVAS 연습12(이미지 합성) (0) 2018.06.29 CANVAS 연습11(색상 변경) (0) 2018.06.27 CANVAS 연습10(기울임) (0) 2018.06.26