Canvas 如何删除画布中形状之间出现的不需要的白线
嗨，我刚刚用适当的x和y值渲染了一些画布矩形。因为我在每个矩形之间发现了一些白线。这扰乱了整个结构。请参阅随附的屏幕截图 或者也参考这个 问题：复制源代码：Canvas 如何删除画布中形状之间出现的不需要的白线,canvas,html5-canvas,Canvas,Html5 Canvas,嗨，我刚刚用适当的x和y值渲染了一些画布矩形。因为我在每个矩形之间发现了一些白线。这扰乱了整个结构。请参阅随附的屏幕截图 或者也参考这个 问题：复制源代码： <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="600" height="250" style="border:1px solid #d3d3d3;"> </canvas> <script> var
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.moveTo(20.5, 20.5);
ctx.arcTo(20.5, 20.5, 100.5, 20.5, 0);
ctx.arcTo(100.5, 20.5, 100.5, 70.5, 0);
ctx.arcTo(100.5, 70.5, 20.5, 70.5, 0);
ctx.arcTo(20.5, 70.5, 20.5, 20.5, 0);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100.5, 20.5);
ctx.arcTo(100.5, 20.5, 180.5, 20.5, 0);
ctx.arcTo(180.5, 20.5, 180.5, 70.5, 0);
ctx.arcTo(180.5, 70.5, 100.5, 70.5, 0);
ctx.arcTo(100.5, 70.5, 100.5, 20.5, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
</script>
</body>
</html>
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（20.5,20.5）；
ctx.arcTo（20.5,20.5100.5,20.5,0）；
ctx.arcTo（100.5,20.5,100.5,70.5,0）；
ctx.arcTo（100.5,70.5,20.5,70.5,0）；
ctx.arcTo（20.5,70.5,20.5,20.5,0）；
ctx.closePath（）；
ctx.fill（）；
ctx.beginPath（）；
ctx.moveTo（100.5,20.5）；
ctx.arcTo（100.5,20.5,180.5,20.5,0）；
ctx.arcTo（180.5,20.5,180.5,70.5,0）；
ctx.arcTo（180.5,70.5100.5,70.5,0）；
ctx.arcTo（100.5,70.5100.5,20.5,0）；
ctx.closePath（）；
ctx.fill（）；
ctx.restore（）；
请运行此源代码，并看到两个矩形之间出现一条小白线。（如果它不可见，请“缩放”屏幕以使其清晰可见）您是否尝试过矩形.setStroke（颜色.透明）？
您是否尝试过矩形.设置行程（颜色.透明）？
在没有看到代码的情况下，我猜这是一个反别名问题，允许背景在框的边缘略微可见，在这种情况下背景是白色的或看起来是白色的（看起来可能是第一个绘制以填充画布的框的青色） 停止抗锯齿的修复方法是context.translate（0.5,0.5）；实施方式如下：
context.beginPath();
context.translate(0.5,0.5);
context.moveTo(125, 20);
context.lineTo(125, 230);
context.stroke();
结果没有抗锯齿和硬边。如果看不到代码，我猜这是一个抗锯齿问题，允许背景在框的边缘略微可见，在这种情况下，背景是白色的或看起来是白色的（看起来可能是绘制第一个框来填充画布的青色） 停止抗锯齿的修复方法是context.translate（0.5,0.5）；实施方式如下：
context.beginPath();
context.translate(0.5,0.5);
context.moveTo(125, 20);
context.lineTo(125, 230);
context.stroke();
结果没有抗锯齿和硬边。谢谢您的回答，但我已将笔划宽度设置为零，该线不是笔划线。我需要删除该行，而不是对其着色。问题标记为[html5 canvas]，而不是Java。感谢您的回答，但我已将笔划宽度设置为零，该行不是笔划行。我需要删除这些行，而不是给它上色。问题被标记为[html5 canvas]，而不是Java。你的答案的质量会随着源代码而提高，因为人们只能猜测图像，而找不到需要更改的实际代码行。嗨，Wayne，我已经附上了源代码。请检查它。你的答案的质量将随着源代码的改进而提高，图像人们只能猜测，而找不到需要更改的实际代码行。嗨，韦恩，我附上了源代码。你好，韦恩，谢谢你的帮助，我想这会有用的。但在SVG中，我也遇到了同样的问题，为此我找到了一个非常简单的解决方案，将属性“shape rendering”作为“CrispEdge”添加到SVG标记中。像wise一样，在画布中有任何解决问题的选项。我的一般解决方案是以更高的像素数绘制画布，然后在CSS中渲染。抗锯齿的好处是，它不会在对角线上产生阶梯式的边，在动画中也不会逐像素移动，而是通过抗锯齿或混合边上的颜色来渲染亚像素值，就像照片或视频一样。为什么动画要逐像素移动？你知道JavaFX使用浮点坐标而不是整数吗？mipa，Canvas在使用translate时逐像素渲染而不进行抗锯齿处理，因为translate将浮点数舍入为整数。翻译是动画制作的最佳工具；但是，您可以通过在较小的空间中显示较大的CANSA来强制渲染为抗锯齿。您在哪里看到OP正在使用
笔划fill（）fill（）stroke（）笔划fill（）fill（）stroke（）