HMTL5抗锯齿浏览器禁用 我不得不考虑编写一个库来处理HTML5画布画直线、粗线、圆、正方形等基本的基本知识，因为我不能禁用嵌入在核心画布算法的浏览器渲染中的一个特性。

我是否被迫从头开始构建HTML5画布渲染过程？如果我是，谁会和我一起做这件事？谁想改变世界

想象一下一个用HTML5编写的简单绘图应用程序。。。你画一个形状。。。一个封闭的形状，像一个基本的圆，自由的手，更像一个洋葱而不是一个圆（好吧，这就是我的形状！）。。。然后想象一下，选择一个油漆桶图标，然后在您绘制的形状内单击，并期望它填充您选择的颜色

当你选择“油漆桶”时，想象一下你的惊讶，点击你的形状中间，它的颜色就填满了你的形状…但是，不完全是。。。坚持这是不对的！！！在您绘制的形状的边缘内侧，背景色和填充色以及边缘颜色之间存在模糊。。。填充物似乎有缺陷

你想要一个直接的“油漆桶”/“填充”。。。你想画一个形状，然后用颜色填充它。。。别大惊小怪。。。。用你选择的颜色填充你形状的整个该死的内部

您的web浏览器已决定，当您绘制线以定义形状时，它们将被抗锯齿。如果你为你的形状画一条黑线。。。嗯，浏览器将沿边缘在某些地方绘制灰色像素。。。让它看起来像一条“更好”的线

是的，一条“更好”的线，它加快了油漆/洪水填充过程

浏览器开发人员公开一个属性以禁用其抗锯齿渲染的费用是多少？禁用将节省毫秒为他们的渲染引擎，当然

呸，我真的不想用Bresenham线条渲染算法构建我自己的画布渲染引擎。。。我们能做什么。。。这怎么能改变！！！？？？我需要针对WC3发起请愿吗？？？？如果你感兴趣的话，你会写上你的名字吗

更新

函数绘制线（objContext、FromX、FromY、ToX、ToY）{
var dx=数学绝对值（ToX-FromX）；
vardy=Math.abs（ToY-FromY）；
变量sx=（FromX-dy）{err-=dy；CurX+=sx；}
如果（e2

2016/04-更新链接

您可以选择将（替换复古上下文）用于画布（免责声明：我是作者）

如果这是自己编写代码的可行替代方案，您可以通过这样做获得线条、圆圈等：

HTML

<canvas id=c width=960 height=600 data-width=320 data-height=200></canvas>

现在，您可以在不使用抗锯齿的情况下绘制直线、圆等，使用与常规2D上下文完全相同的属性和方法，以非常古老的复古风格进行像素化

还有一些方法，如

eliple（）

，

drawImage（）

（带有调色板减少和抖动）和其他方法

该库用于制作“低分辨率”的复古游戏和程序。如果这是一个目标，或者如果您希望使用全尺寸画布作为基础，则不要期望与本机普通画布一样具有完全的性能

该项目可在上下载

---

希望这有帮助

嗯，我得出了同样的结论，目前正在研究RetroJS，它可以完成这些基本操作（如果有人想合作/接管，请在我的用户信息中访问我的博客，并在那里用电子邮件留言）。你不能关闭路径对象的抗锯齿功能，只能用于图像缩放。嗨，肯，好的，当我的项目取得一些进展时，我会看看我是否有什么贡献。在这个阶段，我有一个基于Bresenham算法的非常基本的线条绘制过程。。。它使用“fillRect”方法绘制单个像素或更粗的线。这不是很理想，线条较粗，大而粗的方形末端看起来不太好！但是，主要的是，我没有得到抗锯齿，所以洪水填充/绘制工作如预期。。。将在下一条注释后发布代码…函数绘图线（objContext，FromX，FromY，ToX，ToY）{var dx=Math.abs（ToX-FromX）；var dy=Math.abs（ToY-FromY）；var sx=（FromX-dy）{err-=dy；CurX+=sx；}if（e2<canvas id=c width=960 height=600 data-width=320 data-height=200></canvas>

var canvas = document.getElementById('c'),
    ctx = canvas.getContext('8-bit');         // get retro context