畫布上下文座標不穩定

Question

我想畫一個html5畫布，下面的代碼應該給我一條從左上角到右下角的對角線。但是我沒有得到預期的結果。上下文需要進行任何轉換嗎？ HTML

<canvas id="myCanvas" style="margin-left:auto; margin-right: 
    auto;width:700px;height:100px;border:1px solid grey"> 
</canvas> 

JS

var canvas = $("#myCanvas"); 
var pen = canvas[0].getContext("2d");  
pen.strokeStyle = "#000000"; pen.lineWidth = "2";  
pen.beginPath(); pen.moveTo(700, 100); pen.lineTo(0,0); 
pen.stroke(); 

http://jsfiddle.net/neilghosh/DvjAP/2/

Answer 1

jsFiddle demo

奇怪但卻真實。 canvas元素W/H也（不只是*）進行設置在線像：

<canvas id="myCanvas" width="700" height="100"></canvas> 

把休息，在你的CSS樣式表：

#myCanvas{ 
     margin-left:auto; 
     margin-right: auto; 
     border:1px solid grey 
    } 

• 爲了更好地理解：
  Canvas元素的W/H值默認爲300x150，但是如果您在樣式表中更改了實際將拉伸您的畫布渲染效果的值，就像它對任何其他圖像所做的那樣。

• 另一種方式改變你的W/H是一個像JS：

  畫布[0] = .WIDTH 700;
  canvas [0] .height = 100;

Demo