createJS로 사각형을 그리면 직사각형이 생성됩니다.

Question

제목에서 완전히 벗어나지 않고 createJs로 사각형을 그리는 데 문제가 있습니다. 나는 일반적으로 사각형을 생성 동등하게 큰면에 사각형 그리기 해요,하지만 나를 위해, 내가 갖는이 :

(매우 간단) 다음과 같이 내가 사용하는 코드는 :

function getRandomNumber(max) 
    { 
     return Math.floor(Math.random() * max); 
    } 

var colors = ["Red", "Green", "Blue"]; 

function createTileArea() 
    { 
     var stage = new createjs.Stage("tileArea"); 
     stage.name = "stage"; 
     var size = 50; 

     for (row = 0; row < 10; row++) { 
      for (col = 0; col < 10; col++) { 
       var id = row + "_" + col; 
       var color = colors[getRandomNumber(3)]; 

       var tile = new createjs.Shape(); 
       tile.graphics.beginFill(color); 
       tile.graphics.drawRect(0, 0, size, size); 
       tile.graphics.endFill(); 
       tile.x = col * size; 
       tile.y = row * size; 
       tile.height = size; 
       tile.width = size; 
       tile.name = id; 

       stage.addChild(tile); 
      } 
     } 

     stage.update(); 
    } 

createTileArea(); 

내가 여기에 바이올린을 가지고 http://jsfiddle.net/QWP3Z/2/

내 질문은 : 나는 내가 10 개 사각형을 생성하고있어 500 픽셀의 폭과 높이가 캔버스를 그 가로 세로 50px이므로 가로 세로 6 개와 직사각형 3 개가 모두 왜 사각형입니까? 이것은 일종의 스케일링 문제입니까?

Answer 1

CSS 스타일을 사용하여 캔버스 크기를 조정하지 말고 html 또는 코드에서 너비와 높이를 직접 변경하십시오. 그렇지 않으면 createJs가 300X150으로 기본 설정되어있는 너비와 높이를 설정하고 CSS는 확대/축소로 작동하여 예제 500X500에 다시 넣습니다.