Question

我在使用jquery在div元素中定位canvas元素时遇到了问题。

＆＃13;

$("body").append($("<div></div>").attr("id", "divy"));
$("#divy").css({
  "position":'absolute',
  "cursor":'move',
  "border":'1px solid red',
  "left":'200px',
  "top":'300px',
  "outerHeight":'0px',
  "innerHeight":'0px',
  "margin":'0px',
  "padding":'0px',
  "min-height":'0px',
  "height":'20px',
})
.html("<canvas id=civy width=20 height=20 ></canvas>")
  liney=document.getElementById("civy");
    oba=liney.getContext("2d");
    oba.fillStyle='yellow';
    oba.fillRect(0,0,50,50);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

您将看到黄色矩形紧靠div元素的红色轮廓的顶部。问题是，当我将canvas元素的高度设置为低于14时，黄色矩形不再与div的顶部对接，并且间隙很明显。宽度将按预期保持在div的左侧。

.html("<canvas id=civy width=5 height=5 ></canvas>")

＆＃13;

$("body").append($("<div></div>").attr("id", "divy"));
$("#divy").css({
  "position":'absolute',
  "cursor":'move',
  "border":'1px solid red',
  "left":'200px',
  "top":'300px',
  "outerHeight":'0px',
  "innerHeight":'0px',
  "margin":'0px',
  "padding":'0px',
  "min-height":'0px',
  "height":'20px',
})
.html("<canvas id=civy width=5 height=5 ></canvas>")
  liney=document.getElementById("civy");
    oba=liney.getContext("2d");
    oba.fillStyle='yellow';
    oba.fillRect(0,0,50,50);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

这在chrome和explorer中都会发生。这是jquery / canvas / css的异常吗？

谢谢，Greg

Answer 1

好的，看起来好多了，感谢你帮助Kaiido。

Jquery canvas div偏移

1 个答案: