使用画布上的处理绘制非像素化线条答案

【问题标题】：Drawing non-pixelated lines using processing on canvas使用画布上的处理绘制非像素化线条
【发布时间】：2015-09-15 08:49:17
【问题描述】：

我正在使用处理在画布上绘制线条。我的代码很简单：

processing.line(line.origin.x, line.origin.y, line.destination.x, line.destination.y);`

但是我得到了像素化的线条：

如何绘制非像素化的精确线条？

【问题讨论】：

使用 svg... 画布，因此 processingjs 是一个像素绘图区域。此外，如果您确实使用 css 调整画布大小，请不要。画布像素大小应与屏幕像素大小相同，因此您不会注意到它。
你能发一个MCVE来证明这个问题吗？
你在画draw()吗？如果是这样，您是否正在调用background()？
@Shubham Goyal Kaiido 的建议很好。要么调整画布元素的大小并以完整大小重绘，要么使用 SVG 渲染器。 AFAIK Processing.js 仅使用 Canvas（像素）进行渲染，但您可以将 p5.js 与 p5.SVG.js 插件一起使用，该插件可以在 javascript 中使用类似处理的语法启用 SVG 渲染。

【解决方案1】：

如果您的行代码在您的绘图函数中，除非您在其上方添加背景颜色，否则它将被像素化。
因此，您可以在绘图函数中添加背景颜色，或者您可以将行代码放在设置函数中。两者都应该消除像素化。

【讨论】：