已更新

Question

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

我是否被迫从头开始构建HTML5 Canvas呈现过程？如果我，谁和我一起做这个？谁想改变这个世界？

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

想象一下你的惊喜，因为你选择了“油漆桶”并点击了你的形状中间，它用颜色填充你的形状......但是，不是...... HANG ON ......这不对！！在您绘制的形状边缘的内侧是背景颜色与填充颜色和边缘颜色之间的模糊...填充似乎有缺陷。

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

您的网络浏览器已决定在绘制线条以定义形状时，它们将被消除锯齿。如果你为你的形状画一条黑线......好吧，浏览器会沿着边缘，在某些地方画出灰色像素......使它看起来像一条“更好”的线。

是的，“更好”的行 * *了油漆/洪水填充过程。

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

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; }
    }
}

Answer 1

2016/04 - 更新了链接

您可以选择使用 8-bit （替换Retro-Context）作为画布（免责声明：我是作者）。

如果这是自己编写代码的可行替代方法，那么你可以通过这样做得到行，圆圈等：

<强> HTML

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

data-*是可选的，代表＆＃34; native＆＃34;解。您也可以将其设置为getContext()的选项。

<强>的JavaScript

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

现在，您可以使用与常规2D上下文完全相同的属性和方法，在没有消除锯齿的情况下绘制线条，圆形等，使用完全相同的属性和方法进行像素化处理。

还有ellipse()，drawImage()（带调色板缩减和抖动）等方法。

该图书馆旨在以低分辨率＆＃34;制作复古外观的游戏和节目。如果这是一个目标，或者如果您希望使用全尺寸画布作为基础，那么就不要像普通普通画布那样期待完整的性能。

该项目可在GitHub at this link上找到。

希望这有帮助！

HTML5抗锯齿浏览器禁用

已更新

1 个答案: