Question

简单的画布绘图，似乎在jsFiddle坐标上没有被正确识别：
JS：

var w = $(".trace").width();
var h = $(".trace").height();

var bgCanvas = $("<canvas></canvas>").addClass("canvas");
bgCanvas.width(w).height(h);
var bgContext = bgCanvas[0].getContext("2d");

$(".trace").append(bgCanvas);

bgContext.strokeStyle = "#000";
bgContext.moveTo(0,0);
//this line should go to the middle of the canvas
//instead it goes much further both horizontally and vertically
bgContext.lineTo(200,100);
bgContext.stroke();

HTML：

<div class="trace"></div>

CSS：

.trace{
    width: 400px;
    height: 200px;
    background: yellow;
}
.canvas{
    border: 1px #000 dotted;
}

jsFiddle

检查最新的IE和Chrome 他们（jsFiddle开发人员）建议在github上提交问题之前与他人分享和检查，所以......那是我的错误，还是jsFiddle？

Answer 1

更改此行：

bgCanvas.width(w).height(h);

到此，它将起作用：

bgCanvas.attr({width: w, height:h});

通过使用.width和.height，您只需修改画布元素的CSS大小而不是其位图。由于默认大小为300 x 150，因此只需将其拉伸到您使用CSS设置的任何内容。

<强> Modified fiddle

我还是jsfiddle bug？

1 个答案: