画布上下文坐标不一致

【问题标题】：canvas context coordinates are inconsitent画布上下文坐标不一致
【发布时间】：2012-03-29 20:01:02
【问题描述】：

我正在尝试在 html5 画布上绘制，下面的代码应该给我一条从左上到右下的对角线。但是我没有得到预期的结果。上下文是否需要任何转换？ HTML

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

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/

【问题讨论】：

我在stackoverflow.com/questions/4397315/html5-canvas-distorted 找到了一种解决方法，但仍然不确定为什么 CSS 不起作用。

标签： javascript jquery css html canvas

【解决方案1】：

jsFiddle demo

奇怪但真实。画布元素 W/H 有（不仅*）要设置 inline 像：

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

将其余部分放入您的 CSS 样式表中：

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

为了更好地理解：
画布元素 W/H 值默认为：300x150，但如果您更改样式表中的值，实际上会像对任何其他图像一样拉伸画布渲染。
另一种改变 W/H 的方法是使用 JS，例如：

画布[0].width = 700;
画布[0].height = 100;

Demo

【讨论】：

小幅修正：宽度和高度值不应有 px 后缀。 HTML5 中的维度值要么是不带后缀的像素值，要么是带% 后缀的百分比值。
@Robin 这是真的！这可能是一个快速输入（非思考）的错误！感谢提及！已更新。