javascript - Canvas 上下文坐标不一致

Question

我正在尝试在 html5 Canvas 上绘图，下面的代码应该给我一条从左上到右下的对 Angular 线。但是我没有得到预期的结果。上下文是否需要任何转换？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，但如果您在样式表中更改该值，它实际上会拉伸(stretch)您的 Canvas 渲染，就像它对任何其他图像所做的那样。

• 另一种更改 W/H 的方法是使用 JS，例如:

  Canvas [0].width = 700;
  Canvas [0].height = 100;

Demo