jsFiddle demo 的

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：

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

Demo

画布上下文坐标不一致

1 个答案:

jsFiddle demo 的