jQuery画布div偏移量答案

【问题标题】：Jquery canvas div offsetjQuery画布div偏移量
【发布时间】：2017-07-27 08:41:30
【问题描述】：

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

$("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);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

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

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

$("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);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

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

谢谢，格雷格

【问题讨论】：

您将 div 的 height 设置为 20px，您需要将其 line-height 设置为 0 jsfiddle.net/dutagwd3
好的，谢谢，但是当我将高度设置为 1 或 2 像素时，我仍然会得到 2 - 3 像素的间隙。
你是对的，你需要将画布'display设置为blockjsfiddle.net/dutagwd3/2

标签： jquery css canvas

【解决方案1】：

好的，看起来好多了，感谢凯伊多的帮助。

【讨论】：