如何在不使用clearRect的情况下对在画布中绘制的笔划进行抗锯齿

时间:2019-06-05 15:36:48

标签: javascript html canvas antialiasing

我正在作为个人项目来开发绘图应用程序(目前居住在http://draw.ist/),我想使绘制的笔触在边缘处变得平滑,但是似乎做到这一点的唯一方法是使用clearRect 。但是,每次我开始一条新路径时,clearRect也会清除画布,并且我想防止这种情况,因此画布实际上会累积笔画。

我已经看到了一些有关创建辅助画布以保存笔划或其他东西的操作,这样透明笔迹就不会擦掉它们(至少我认为它的工作原理如此),但是该方法将需要大量其他代码,想避免。最近,我尝试将画布保存为mouseup上的imageURL,然后在每个clearRect之后立即将其替换为drawImage,这似乎很好用,但它与我的橡皮擦和直线工具也有一些奇怪的交互作用每次加载保存的画布图像时都会有些闪烁。

此处不一定有相关代码的任何特定代码段,但可以在http://draw.ist/找到整个站点供参考(控件:按住shift键以绘制直线,按住空格键以擦除,滚动鼠标滚轮以进行更改刷子大小)

我希望所有绘制的线条都平滑且具有抗锯齿功能,但如果可能的话,不要使用“辅助画布作为存储”方法。我认为在这里对我有帮助的是,理解为什么必须使用clearRect才能对画布中的笔触应用抗锯齿功能,以及它如何完全按照外行的术语工作。我对此非常感谢,无论它是否真的有用!

0 个答案:

没有答案