使用jquery更改了畫布座標

Question

//JQUERY 
    d = $("#gpart"); 
    w = 512; h = 326; 
    d.width(w); 
    d.height(h); 
    $ctx = d[0].getContext("2d"); 
    $ctx.beginPath(); 
    $ctx.moveTo(100, 0); 
    $ctx.lineTo(100, 100); 
    $ctx.lineWidth = 1; 
    $ctx.strokeStyle = '#bbbbbb'; 
    $ctx.stroke(); 
}) 
//PLAIN 
    d = document.getElementById("gpart"); 
    d.width = 512; 
    d.height = 326; 
    ctx = d.getContext("2d"); 
    ctx.beginPath(); 
    ctx.moveTo(100, 0); 
    ctx.lineTo(100, 100); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = '#bbbbbb'; 
    ctx.stroke(); 

使用jquery，座標按比標準畫布大小（例如100 => 170+）更大的比例放大。我哪裏錯了？

Answer 1

更新：在第二個示例中，d是canvas元素，因此您可以設置它的寬度和高度。在第一個示例中，d [0]是實際的畫布元素，您應該爲d [0]設置寬度和高度。 退房的工作示例：

http://jsfiddle.net/2jsSw/

老： 這一切都很好，而且這兩個版本是相同的，如果在jQuery的版本，歐洲工商管理學院：

d.width(w); 
d.height(h); 

（這將設置CSS寬度和畫布的高度，以像素爲單位）

你使用：

d.attr('width',w); 
d.attr('height',h); 

看來，對於canvas元素，width和height屬性指定畫布API使用的座標系統的大小，而CSS寬度和高度指定在頁面上繪製的畫布元素的大小。