无法在部分画布上绘图

Posted 2023-03-24

【中文标题】无法在部分画布上绘图

【英文标题】：Cannot draw on part of canvas

【发布时间】：2017-05-01 00:01:06

【问题描述】：

注意画布底部的空白行。它的 不可能在那条线上画出来。

如何使用整个画布进行绘图（全分辨率）？

浏览器：54.0.2840.99（官方版本）m（32 位）/Windows 7

在整页中运行：

var el = document.getElementsByTagName("canvas")[0];
var ctx = el.getContext("2d");
el.width = el.clientWidth;
el.height = el.clientHeight;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(el.width, el.height);
ctx.lineTo(0, el.height);
ctx.fill();
ctx.closePath();

html 
  height: 100%;

body 
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 667.19px; /* = `80vh` in viewport of 834 px height */

.bar 
  flex: auto;
  background: black;
  height: 20px;

#display 
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;

canvas 
  position: absolute;
  width: 100%;
  height: 100%;

 <div class="bar"></div>
 <div id="display">
   <canvas></canvas>
 </div>
 <div class="bar"></div>

明确一点：上面的 javascript 代码调整了画布的像素尺寸，使其与画布元素的像素尺寸相匹配。这个问题是关于画布上无法绘制的区域。

【问题讨论】：

如果我尝试使用Stack Snippets 对上述代码进行演示，以便于调试，您会非常介意吗？

@Daedalus 一点也不。随意这样做！

@Κ3Ν 我在问题的最后加了一段，给那些懒得看源码的人。解释是这个问题不是问题Canvas width and height in HTML5的重复。

尝试在sn-p中重现问题后，找到了原因；您的浏览器已缩小到 90%。

@Daedalus Zoom 达到 100%。

【参考方案1】：

画布的默认样式是display:inline（或其他东西；无论哪种方式，它都不是display:block）。结果，浏览器在其下方添加了少量空间，就像它在文本下方一样。您应该可以通过将display:block 添加到画布的样式来解决此问题。

【讨论】：

元素下方的间距不是问题。空白行是在画布上。

也许我应该在发布之前对问题进行更多测试......但是当将图像保存为 png 时，它下面似乎没有白色/透明线。同样在放大/缩小时，线条会出现和消失。可能是 flex 的问题。

在画布上添加background: red，空行会变成红色。