我或 jsfiddle 错误

Me or jsfiddle bug?

本文关键字：错误 jsfiddle 我或      更新时间：2023-09-26

简单的画布绘图，似乎在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;
}

js小提琴

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

更改此行：

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

对此，它将起作用：

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

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

改良小提琴

相关文章：