캔버스가 의도 한대로 작동하지 않습니다.

저는 html5로 다이빙 한 캔버스에 그리드와 같은 그래프 용지를 그리는 스크립트를 사용했습니다. 결과는 측면 10px의 사각형이있는 메쉬를 그리기로되어 있지만 크기가 대략 20px가되고 정확한 사각형이 아닙니다.
다음은`캔버스가 의도 한대로 작동하지 않습니다.

<html> 
     <head>  
      <style> 
    body{ 
     margin: 20px 20px 20px 20px; 
    } 

    canvas{ 
     width: 500px; 
     height: 375px; 
     border: 1px solid #000; 
    } 
    </style> 
    <script type="text/javascript"> 
     function activate(){ 
      var canvas =document.getElementById("exp"); 
      var context = canvas.getContext("2d"); 

      for (var x=0.5;x<500;x+=10){ 
       context.moveTo(x,0); 
       context.lineTo(x,375); 
       console.log(x); 
      } 

      for (var y=0.5;y<375;y+=10){ 
       context.moveTo(0,y); 
       context.lineTo(500,y); 
      } 

      context.strokeStyle="#000"; 
      context.stroke(); 
     } 
    </script> 
</head> 

<body> 
    <canvas id="exp"><script type="text/javascript">activate();</script></canvas> 
</body 
    </html>

코드입니다 그리고 이것은 출력 :
canvas rendered
실제 출력이 있어야 할 때 :
actual canvas
참고 : 내가 색차 걱정하지 않아요. 내가 이해하지 못하는 이유는 2 라인 사이의 공간이 10px 대신 20px (파이어 폭스의 측정 도구로 확인 됨) 인 이유입니다.
또한 x의 값을 인쇄 할 때 올바른 값 (예 : 매번 10 씩 증가)을 제공합니다.

출처

2012-02-18 Likhit

' ' –

CSS의 캔버스 크기를 설정할 수 없습니다 DOM 속성에서 설정해야합니다.

<canvas width="100" height="200"></canvas>

출처

2012-02-18 10:09:06 Kevin

예에서'>'가 누락되었지만 CSS가 줄 너비를 어떻게 변경했는지 이해할 수 없습니까? 또한 css가 캔버스에 적용되지 않았지만 캔버스가 여전히 502x377px (정확하게)의 크기를 얻었습니다. 왜? – Likhit

CSS는 스타일의 너비와 높이를 변경하지만 캔버스의 너비와 높이는 변경하지 않습니다. 캔버스는 이미지와 마찬가지로 이미지의 스타일 너비와 높이를 설정하면 이미지의 실제 크기가 변경되지 않습니다. – Kevin

자바 스크립트가 자동으로 계산됩니다.

HTML :

<canvas id="exp"></canvas>

JS :

function activate(id, xcount, ycount, width, color) { 
    var canvas = document.getElementById(id); 
    var context = canvas.getContext("2d"); 

    canvas.width = xcount * width + 1; 
    canvas.height = ycount * width + 1; 

    for (var x = 0.5; x < canvas.width; x += width) { 
     context.moveTo(x, 0); 
     context.lineTo(x, canvas.height); 
    } 

    for (var y = 0.5; y < canvas.height; y += width) { 
     context.moveTo(0, y); 
     context.lineTo(canvas.width, y); 
    } 

    context.strokeStyle = color; 
    context.stroke(); 
} 
activate("exp", 37, 50, 10, "#ccc");

는 또한 this example 볼 만 매개 변수를 설정합니다.

출처

2012-02-18 10:36:52 scessor

캔버스가 의도 한대로 작동하지 않습니다.

답변

관련 문제