我想画一个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();

来源

2012-03-29 SoulMan

我发现了一个解决办法，在http://stackoverflow.com/questions/4397315/html5-canvas-distorted但仍然不知道为什么CSS不起作用。 – SoulMan 2012-03-29 10:39:13

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

来源

2012-03-29 11:09:46

稍作修改：宽度和高度值不应有'px'后缀。 HTML5中的维度值是没有后缀的像素值，或者是带有'％'后缀的百分比值。 – 2012-03-29 11:59:21

@Robin这是真的！这可能是一个快速输入（无思维）的错误！感谢提及！更新。 – 2012-03-29 12:01:51

谢谢@ RokoC.Buljan！ – SoulMan 2012-03-29 14:13:46

画布上下文坐标不稳定

回答

jsFiddle demo

相关问题