我不得不考虑编写一个库来处理HTML5画布的绘制线条，粗线条，圆形，正方形等基本基础知识，因为我无法禁用嵌入在浏览器呈现中的功能的核心画布算法。HMTL5反锯齿浏览器禁用

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

想象一下用HTML5编写的一个简单的绘图应用程序......你画一个形状......一个像初级圆圈那样的闭合形状，自由的手，更像是一个洋葱而不是一个圆圈（好吧，那就是我的样子！）...然后想象一下，选择一个油漆桶图标，然后点击您绘制的形状，并期待它填充您选择的颜色。

想象一下，当你选择“油漆桶”并在你的形状中点击并用颜色填充你的形状时，你会感到惊讶......但是，不完全......悬挂......这是不对的！！在你绘制的形状边缘的内侧是背景颜色和填充颜色以及边缘颜色之间的模糊......填充似乎是有缺陷的。

你想要一个直接的“油漆桶”/“填充”...你想绘制一个形状，然后用一种颜色填充它...没有大惊小怪....填充你的形状内的整个内心与你选择的颜色。

您的网络浏览器已经决定，当您绘制线条来定义您的形状时，它们将被消除锯齿。如果你为自己的形状绘制黑线......那么浏览器会沿着边缘绘制灰色像素......以使它看起来像一条“更好”的线条。

是的，一条“更好”的线，* *的油漆/洪水填充过程。

支付浏览器开发人员暴露属性以禁用其抗锯齿渲染的成本是多少？禁用会为他们的渲染引擎节省毫秒，当然！

Bah，我真的不想用Bresenham线渲染算法来构建我自己的画布渲染引擎......可以做什么......如何改变!!! ???我是否需要开始针对WC3的请愿？如果你有兴趣，你会包括你的名字吗？

修订

function DrawLine(objContext, FromX, FromY, ToX, ToY) { 
    var dx = Math.abs(ToX - FromX); 
    var dy = Math.abs(ToY - FromY); 
    var sx = (FromX < ToX) ? 1 : -1; 
    var sy = (FromY < ToY) ? 1 : -1; 
    var err = dx - dy; 
    var CurX, CurY; 
    CurX = FromX; 
    CurY = FromY; 
    while (true) { 
     objContext.fillRect(CurX, CurY, objContext.lineWidth, objContext.lineWidth); 
     if ((CurX == ToX) && (CurY == ToY)) break; 
     var e2 = 2 * err; 
     if (e2 > -dy) { err -= dy; CurX += sx; } 
     if (e2 < dx) { err += dx; CurY += sy; } 
    } 
}

来源

2013-10-18 Tappa Tappa

那么，我得出了同样的结论，目前正在开展这些基本操作的RetroJS（如果有人想在我的用户信息中合作/接管我的博客并在邮件中留言）。您*无法*关闭路径对象的抗锯齿功能，仅限图像缩放。 – K3N

嗨，肯，好吧，当我的项目取得了一些进展时，我会看看我是否有任何贡献。在这个阶段，我有一个基于Bresenham算法的非常基本的线绘制过程...它使用“fillRect”方法绘制单个像素或更粗的线。它不是很理想，用粗线条和粗大的方形端点看起来不太好！但是，主要的是我没有得到反锯齿，所以洪水填充/油漆按预期工作。 ...将发布代码下一条评论... –

函数DrawLine（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;如果（e2

2016/04 - 更新链接

可以作为一种选择，使用8-bit（取代复古上下文）的画布（免责声明：我是作者）。

如果这是要编写代码自己，你可以得到一个可行的替代线，圆等。通过这样做：

HTML

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

的data-*是可选的，代表了“原生“解决方案。您也可以将其设置为getContext()的选项。

的JavaScript

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

现在你可以画线，圆等无抗锯齿，使用完全相同的属性和方法与普通2D背景在一个漂亮的老派复古风格像素化。

也有方法，如ellipse(),drawImage()（调色板缩减和抖动）和其他东西。

该库旨在用“低分辨率”制作复古外观游戏和程序。如果这是一个目标，或者如果您希望使用全尺寸帆布作为基础，那么不要期望与原生普通帆布完全相同。

该项目可在GitHub at this link。

希望这会有所帮助！

来源

2014-02-02 03:41:14 K3N

这太棒了肯，我要去看看你的图书馆！ –

HMTL5反锯齿浏览器禁用

修订

回答

相关问题