HTML5 + JavaScript 로 이미지 Canvas에 그리기

HTML5 에서 Cancas를 이용해 이미지를 그리기위한 예제의 일부분 입니다.

'한 번에 배우는 HTML5 + 자바스크립트'를 참조해 구현했으며
실행은 크롬브라우저에서 실행해보았습니다.

아래의 코드는 2D의 이미지를 그리기위해 context를 얻는 방법입니다.

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

실제 예제에서는

      var canvas = document.getElementById("canvas").getContext("2d");

로 선언하여 사용했지만 브라우저의 문제인지 잘 실행 되지 않아 나눠서 사용했습니다.

주사위게임의 예제를 1~6의 주사위 이미지로 바꾸어 표현하기위해
이미지변수를 배열로 선언하여 사용해보았습니다.

      var imgDice = new Array(6);
     
      for(i = 0; i < 10 ; i++)
      {
          imgDice[i] = new Image();
          imgDice[i].src = "dice"+i+".png";
      }     

이미지 배열의 사용법을 찾기위해 조금 해맷는데 배열을 먼저 선언하고 각각의 배열을
이미지 객체로 선언해주는 방식을 이용했습니다.

위에서 선언한 context 를이용하여 주사위를 그린다면 다음과 같습니다.

ctx.drawImage(imgDice[n], dx,dy, 70, 70);

n은 난수발생을 이용해 주사위가 무작위로 나오는것을 구현하였고

dx, dy는 주사위 이미지의 시작점을

뒤의 70,70 은 이미지의 가로, 세로 높이를 지정해주었습니다.