캔버스 태그의 크기는 모두 픽셀 단위입니까?

Question

캔버스 태그의 크기는 모두 픽셀 단위입니까?

내가 이해하기 때문에 묻습니다.
하지만 수학이 망가 졌거나 여기서 뭔가 이해하지 못하고 있습니다.
저는 주로 파이썬을 해왔고 Java Scripting으로 뛰어 들었습니다.
만약 내가 바보 같은 짓을하고 있다면 알려줘.
필자가 쓰고있는 게임에서, 나는 완만 한 그라디언트를 원했다.
나는 다음이 : 나 여기에

function testDraw (thecontext) 
{ 
    var myblue = 255; 
    thecontext.save(); // Save All Settings (Before this Function was called) 
    for (var i = 0; i < 480; i = i + 10) { 
     if (myblue.toString(16).length == 1) 
     { 
      thecontext.fillStyle = "#00000" + myblue.toString(16); 
     } else { 
      thecontext.fillStyle = "#0000" + myblue.toString(16); 
     } 
     thecontext.fillRect(0, i, 640, 10); 
     myblue = myblue - 2; 
    }; 
    thecontext.restore(); // Restore Settings to Save Point (Removing Styles, etc...) 
} 

function main() 
{ 
    var targetcontext = document.getElementById(“main”).getContext("2d"); 
    testDraw(targetcontext); 
} 

JavaScript (Shortened)CSS

@media screen { 
    body { font-size: 12pt } 
    /* Game Rendering Space */ 
    canvas { 
     width: 640px; 
     height: 480px; 
     border-style: solid; 
     border-width: 1px; 
    } 
} 

<canvas id="heir"></canvas> 

HTML

가 10H 픽셀 막대로 640w의 시리즈를 생산한다. Google Chrome 및 Fire Fox에서는 15 개의 막대가 표시됩니다. 나에게 그 의미는 (480/15) 32 픽셀의 높은 막대이다.
그래서 나는에 코드를 변경합니다

function testDraw (thecontext) 
{ 
    var myblue = 255; 
    thecontext.save(); // Save All Settings (Before this Function was called) 
    for (var i = 0; i < 16; i++) { 
     if (myblue.toString(16).length == 1) 
     { 
      thecontext.fillStyle = "#00000" + myblue.toString(16); 
     } else { 
      thecontext.fillStyle = "#0000" + myblue.toString(16); 
     } 
     thecontext.fillRect(0, (i * 10), 640, 10); 
     myblue = myblue - 10; 
    }; 
    thecontext.restore(); // Restore Settings to Save Point (Removing Styles, etc...) 
} 

그리고 비교를 위해 진정한 32 픽셀 높이 결과를 얻을. 첫 번째 코드 스 니펫이 캔버스의 보이지 않는 부분에 파란색 렌더링 음영을 가지고 있다는 것 외에도 32 픽셀을 측정하고 있습니다. 나는 파이어 폭스에서 그것을 검사하면 나는 그것이 640 × 480
를보고 크롬에서 캔버스 태그를 검사하면 다시 원래 자바 코드에 이제

---

...
그것은 640 × 480
보고 하지만! Fire Fox는 원래 코드를 300 x 150 (10의 15 행) 인 png로 내 보냅니다. 일부 640x480으로 설정되는 대신 CSS로 640x450 크기를 조정하는 방법이 있습니까?

왜, 어떻게? O_o 혼란 스러웠습니다 ...

Answer 1

html로 만들 때 캔버스 너비와 높이를 설정해야한다고 생각합니다. 그 값은 캔버스의 좌표 공간의 크기를 제어하고 기본값은 캔버스 요소는 좌표의 크기를 제어하는 ​​두 가지 속성 있다 http://dev.w3.org/html5/spec/Overview.html#canvas

에서 300 X 150

<canvas id="heir" width="640" height="480"></canvas> 

입니다 공간 : 너비와 높이. 이 속성은 지정된 경우 정수가 아닌 유효 값이 이어야합니다. 음수가 아닌 정수를 파싱하는 규칙을 사용하여 의 숫자 값을 가져와야합니다. 속성이 누락되었거나 의 값을 해석하면 오류가 반환되는 경우 기본값을 대신 사용해야합니다. 폭은 300, 에 기본값 속성과 높이 당신은뿐만 아니라 종료 태그가 필요 (150)