나는 다음을 달성 노력하고 캔버스

내부 점의 미리 정의 된 번호를 그리기 몇 가지 시도했지만, 올바른 간격으로 사각형/도트를 올바른 크기로 만드는 데 실패했습니다.나는 다음을 달성 노력하고 캔버스

이것은 하나의 행을 그리려고하는 예입니다. 나는 행/열

function draw(){ 
      var width = 800; 
      var height = 400; 

      var nrow = 32; 
      var ncol = 48; 

      var canvas = document.getElementById('tutorial'); 
      if (canvas.getContext){ 
       var ctx = canvas.getContext('2d'); 
       //Have a border so drawing starts at 20,20 
       var spacew = width - 40; 
       var x = Math.floor(spacew/ncol); 

       var currCol = 20; 
       for(i = 1; i<ncol; i++){ 
        ctx.beginPath(); 
        ctx.arc(currCol, 20, x, 0, Math.PI*2, true); 
        ctx.closePath(); 
        ctx.fill(); 

        currCol = currCol + x*2; 
       } 

      } 
     }

나는 이것에 대해, 어쩌면 예를 갈 것입니다 방법에 대한 생각의 주어진 수에 출근하려고?

덕분에

출처

2012-09-21 by0

여기 http://jsfiddle.net/J9MLq/7/ 예를 만들었습니다. 각 원의 지름은 2*radius입니다. var x = width/ncol/2; 캔버스 너비에 따라 반경을 동적으로 계산할 때 넣었습니다 (Math.floor/Math.ceil이 필요하지 않습니다. 그렇지 않으면 원과 테두리 사이에 간격이 생깁니다). 또한 이제 canvas 요소의 크기를 조정할 수 있으며 함수는 draw(width, height) 매개 변수를 사용할 수 있습니다. 이제 스스로 행을 가지고 놀 수 있습니다. 행과 열의 양을 받아들이도록 함수를 확장 할 수 있습니다. 그냥 거기에 그것을 시도하십시오 ...

출처

2012-09-21 15:39:04 alekperos

고마워. 때로는 점 호가 끊어 지거나 점들 사이에 공백이 있습니다. 이 주변에 어쨌든 있습니까? http://jsfiddle.net/J9MLq/8/ – by0

문제는 계산 결과가 분수이고 그리기 프로세스 중에 있으므로 고정 된 반복 작업 이후 원의 겹침 등을 관찰 할 수 있기 때문에 currCol 및 currRow 좌표 내에 있습니다. 이 [http://jsfiddle.net/J9MLq/12/](http://jsfiddle.net/J9MLq/12/)는 주어진 폭/높이에 비례하여 원이 그려지고 행/열 사이의 공간이 증가하는 예제입니다 각기. 두 번째 [예 - http://jsfiddle.net/J9MLq/11/](http://jsfiddle.net/J9MLq/11/)에는 원 사이에 간격이 없지만 반경은 너비와 높이에 비례합니다. – alekperos

위의 예제가 수학 함수를 사용하여 좌표로 재생할 수있는 옵션을 제공하기를 바랍니다. – alekperos

나는 다음을 달성 노력하고 캔버스

답변

관련 문제