当尝试显示一个填充了渐变色的图形并旋转它时，出现了一个以水平条纹形式显示的问题。这可以在所附的屏幕截图中看到。此外，代码可以在下面的链接或此消息中找到。
https://codepen.io/borodin-the-sans/pen/ZEjpJaB
该问题仅在移动的设备或Apple硅处理器上的Safari浏览器中显示。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="background-color: black">
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let rotation = 1.3;
function draw() {
ctx.save();
ctx.translate(256, 256);
ctx.rotate(rotation);
const gradient = ctx.createLinearGradient(-128, -128, 256, 256);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(128, 0);
ctx.lineTo(0, 128);
ctx.lineTo(-128, 0);
ctx.lineTo(0, -128);
ctx.closePath();
ctx.fill();
ctx.restore();
}
canvas.width = canvas.height = 512;
draw();
</script>
</body>
</html>如果我改变多边形的旋转度，或者使用fillRect，或者用更简单的颜色替换渐变，问题就会消失。
但是我需要在更复杂的渐变多边形中使用旋转动画。我不希望在多边形的顶部看到水平条纹。
我可以计算出这个伪影的大小和位置并清除它。但是如果我在画布上使用任何背景，它将变得无法忍受。
1条答案
按热度按时间b5lpy0ml1#
我找到了一个在我的情况下有效的解决方案，有必要在画布外绘制长度至少为1像素的线条，这样伪像就不会引人注意。
完整代码：
x一个一个一个一个x一个一个二个一个x一个一个三个一个